CSS Fonts

【CSS指南】Day02 – CSS Fonts 字體屬性,看這篇就夠了(最詳細說明)

CSS Fonts ( 字體 ) 屬性就是專注在於定義字體一系列的改變屬性,本章節會詳細說明一般前端開發者常用的字體屬性,只要了解這些就夠囉! 並不需要去背還有記,多多練習並多使用就會學起來了。

  1. CSS 自定義字體系列
  2. CSS 字體大小如何設置?
  3. CSS 粗細大小如何設置?
  4. CSS 文字樣式如何設置?
點我瞭解 小青如何每月多賺5位數台幣

CSS 的 font-family 如何設置字體?

CSS的font family 如何設置字體

在 CSS 中使用 font-family 屬性就能夠定義整個頁面呈現出來了字體樣式,就跟平常在使用 Word 或是 PPT 是不是要如果你需要字體樣式就會選擇改變一下字體樣式,那在網頁中我們也可以自行定義自己喜歡和讀者閱讀起來不吃力的字體系列,要注意的事既然說事系列那當然可以一次設置很多字體。

CSS 的 font – family 書寫格式

CSS的 font family 書寫格式
P {
font-family: font-name, font-name, font-name;
}

P {
font-family: font-name, "font-name", font-name;
}

在 font-family 後緊接者是 font-name 你可以寫入你想要呈現網頁中的字體樣式名稱,可以填入一種或是多種字體,一般依照開發者決定,但至少要 3 種字體樣式會比較保險,還要注意字體樣式與字體樣式會使用半型逗號「,」隔開,瀏覽器會依照順序加載字體到你的網頁中,如果第一個不能匹配使用就會選擇第二個,第二個不行就選第三個以此類推。

眼尖的你會發現為什麼有的字體有加分號「”」包起來呢? 這是因為那個本身命名是由多個單字組成中間會有空格,網頁沒辦法區分空格所以你需要用分號「”」把這個字體名稱包起來,告訴網頁說這是一個字體唷! 這樣知道了吧!?

P {
font-family: "微軟雅黑";

}
a {
font-family: cursive, "Microsoft JhengHei",

}

如果以上字體都不匹配怎麼辦? 所以為了保險起見我們會在最後一個字體選擇使用 generic-family ( 通用字體 ) 唷!

點我瞭解 小青如何每月多賺5位數台幣

什麼是 generic-family ( 通用字體 )呢?

什麼是 generic family 通用字體 呢

有的人使用三星的手機有的人使用 ASUS 又有的人使用 APPLE 手機,那電腦有人使用微軟作業系統和蘋果系統,要知道每個作業系統預設的文字都會不相同,如果今天你網頁要呈現很特殊的文字呈現給讀者觀看,這些系統可能會沒辦法呈現出來,原因是這些字體太新了也並不是普遍人會用到的字體,只有在更新系統時可能會被加載進來設備。

所以保險起見要讓網頁文字最後都沒字體可以呈現,最後總要有一個字體一定能夠顯示,前端人員一定會加入 generic-family ( 通用字體 ),而通用字體就是一定保證能夠讓每家不同設備呈現這類型文字的需求,否則文字呈現不出來或是亂碼可就對讀者的體驗就不好了。

常見的 generic-family ( 通用字體 ) 有哪些?

常見的 generic family 通用字體 有哪些

本節介紹最常用的通用型字體,現在有 sans-serif ( 無襯線體 )、serif ( 有襯線體 )、monospace ( 等寬體 )、cursive ( 手寫體 ) 和 fantasy ( 幻想體 ) 就這五種最常使用,如果你有查到 emoji 和 fangsong …等字體符號,雖然是慢慢普及但有些設備還是並不支援,本篇還是以前面五種來進行介紹。

  • sans-serif ( 無襯線體 )
  • serif ( 有襯線體 )
  • monospace ( 等寬體 )
  • cursive ( 手寫體 )
  • fantasy ( 幻想體 )

無襯線體 VS 有襯線體 差別在哪裡?

無襯線體 VS 有襯線體 差別在哪裡

如果你個人有研究過字體,我相信你一定可以分出來這兩者之間的區別,那對於新手要怎麼分辨呢? 到底無襯線體 ( Sans-Serif ) 跟有襯線體 ( Serif ) 讓我們直接從視覺上面來看是什麼樣的感覺體驗呢?

點我瞭解 小青如何每月多賺5位數台幣

無襯線體 ( Sans-Serif ) 是什麼?

無襯線體 Sans Serif 是什麼

就是指沒有襯線的字體,簡單來說一般寫字或是寫毛筆可能因為筆劃產生哪邊會需要比較大力,哪邊要收,因為這樣每個字體都會粗細不同,這些東西在無襯線體 ( Sans-Serif ) 之中是沒有的,今天如果使用 0.5 的筆寫出來的字,字體的線條寬細度全部都 0.5,所以常常應用於重要標題、廣告能夠瞬間的讓讀者視覺體驗較高。

有襯線體 ( Serif ) 是什麼?

有襯線體 Serif 是什麼

就是跟無襯線體 ( Sans-Serif ) 相反,簡單來說筆劃該收的時候就收、該大力就大力,以上會使文字就有個別特色與風格,一般在使用上無襯線體 ( Sans-Serif ) 會用比較大才能呈現字體的特色,常用在大型刊板廣告,字體缺點是如果字體太小會影響閱讀體驗。

等寬體 ( monospace ) 是什麼?

等寬體 monospace 是什麼

等寬體是表示所有字體文字、數字都有相同的寬度,一般在我們中文不太會有寬度不太相同的原因出現,但是在英文就會出現很多不同寬度的字母舉例英文字母 W 和 a 它們是不是明顯寬度差很多,所以在排版上會出現一些問題,如果指定 monospace ( 等寬體 ) 這些寬度問題就會自動解決掉。

手寫體 ( cursive ) VS 幻想體 ( fantasy )

手寫體 cursive VS 幻想體 fantasy

這兩個字體其實也很像,小青我呢就決定把它們兩個放在一起來說,cursive ( 手寫體 ) 就是字面上的意思用手書寫,古人是用毛筆現代人用原子筆來書寫,所以寫出來的線條有時候會歪,講簡單明白點就是很貼近一般人寫字的樣式,該歪的會歪該扭的會扭。

fantasy ( 幻想體 ) 這字體也像是人的書寫過程,但是筆換成是鋼筆,鋼筆寫的方式就是直直的一條,由於鋼筆的頭是固定死的寫出來寬度都一樣,也沒辦法做出該扭的時候扭不然鋼頭會壞掉,所以幻想體會給人感覺中規中矩。

小總結:

一般我們在添加字體最好要 3 個以上以防止該設備可能沒有該字體,其中需要設置最少一組通用字體,字體盡可能都使用英文來添加到 font-family 裡頭,現在有很多中文樣式的字體都有英文命名,這樣做是兼容性會比較高。

  • 英文字體有多個單字組成需要添加分號包住;例如: “Microsoft Yahei”
  • 中文字體幾乎都有英文名稱;例如: 微軟雅黑 ( Microsoft Yahei )
  • 分號能使用單分號「’」和雙分號「”」都可以
  • 盡量使用系統默認字體
點我瞭解 小青如何每月多賺5位數台幣

CSS 的 font-size 字號大小如何使用?

CSS的 font size 字號大小如何使用

再來我們需要學習一下 font-size 文字大小屬性,這樣我們就能夠規定網頁中能夠呈現出來的文字大小,並自訂出符合讀者的字號,你可能要先需要搭配你網頁的版面在決定出字號的選擇,那我們來看看字體字號要怎麼使用吧!

p {
 font-size: 25px;
}

只需要寫下 font-size 屬性後就直接填入數字,但是要記得加入 px ( 像素 )大小這是網頁最常用的單位。

  • px ( 像素 ),網頁中常用的單位
  • Google Chrome 默認字體大小為16 px
  • 要知道不同設備呈現的網頁默認字體大小都不同
  • 一般改變文字大小都是改變 body 標籤裡面所有文字
<style>
	body {
		font-size:25px;
}
</style>

<body>
	<h1>自我介紹</h1>
	<p>大家好!</p>
	<p>我是小青</p>

</body>

當你寫完後你會發現奇怪,為什麼標題的字體怎麼沒有跟 <p> 段落標籤一樣都是同樣的字號呢?! 這邊小青我來幫你解答吧! 那是因為 <h1> 標題標籤是特殊的,你需要另外指定它才能控制改變標題標籤的文字大小,其餘的都會被你一開始寫在 body 標籤裡頭的 font-size 屬性給加載產生字體上的改編唷!

那我們來改變一下 <h1> 標題標籤裡頭的文字大小看看吧!

<style>
	body {
		font-size: 25px;
}
	h1 {
		font-size: 36px;
}
</style>

<body>
	<h1>自我介紹</h1>
	<p>大家好!</p>
	<p>我是小青</p>

</body>

這樣單獨指定 <h1> 標題標籤我們就能夠去改變它的文字大小、顏色,雖然你可能會覺得有點麻煩,但是 <h1> 標題標籤是能夠提示下方 <p> 段落標籤的文字中要跟你表達或是傳達重要資訊的濃縮,勢必就不能跟 <p> 段落標籤有一樣對等的權限,如果是一樣就不太能區分出兩者的差異了。

CSS 的 font-weight 字體粗細如何使用?

CSS的 font weight 字體粗細如何使用

如果你需要給字體加粗,我們可以使用 CSS 中的 font-weight 屬性設置文字的粗細度,一般使用這個 font-weight 屬性可以用英文或是數字來控制表示文字的粗細度變化。

  • normal ( 正常字體;數字代號: 400 )
  • bold ( 粗體;數字代號: 700 )
  • bolder ( 特粗體 )
  • lighter ( 細體 )
  • number 數字

你可能又會有問題問我了,那之前我們學的 HTML 的標籤就有 <b>、<strong> 標籤了為什麼我們還需要學 font-weight 呢? 問的好! 那是因為是用在不同場景的方便度,如果今天我們如果使用一整大片文字要加粗使用 font-weight 進行控制會比較方便,後期如果有添加新文字維護也方便許多幾乎不用改。

如果今天你是使用 <strong> 標籤也是能夠做加粗效果,但不能做到我要多粗多細是只有固定的粗度,日後如果有添加新文字很麻煩你要先找到這個標籤才把文字包進去裏頭,要知道後網站只會越來越龐大複雜,這樣維護起來太勞累了,一般我們只會用到名言或是重要句子,日後部會更改才會使用HTML 的加粗效果。

<style>
	p {
		font-weight: 700;
}
	h1 {
		font-weight: normal;
}
</style>

<body>
	<h1>自我介紹</h1>
	<p>大家好!</p>
	<p>我是<strong>小青</strong></p>

</body>

小總結:

  • <strong> 標籤只適合用很特別的重要句子
  • font-weight 能夠控制一大片文字,維護方便
  • font-weight 能夠改變字體粗細度
  • font-weight 一般我們使用數字來控制居多
點我瞭解 小青如何每月多賺5位數台幣

CSS 的 font-style 字體樣式如何使用?

CSS的 font style 字體樣式如何使用

在字體中我們還可以改變字體的樣式風格,也就是說能讓字體改成斜體的或是不是斜體的,所以能夠使用 CSS 的 font-style 屬性來進行設置文字的風格。

p {
	font-style: italic;
}
<style>
	p {
	font-size: italic;
}
	em {
	font-style: normal;
}

</style>

<body>
	<p>大家好!</p>
	<em>我是小青</em>

</body>

以上效果能夠把原本就是 <em> 斜體標籤,使用 CSS font-style 屬性強行改成沒有斜體,這就是 font-style 的強大之處,就算是斜體也可以把它掰成正的。

這裡你可能又會對小青進行發問,那跟 HTML 的 <em> 標籤有什麼不同,一樣是用在重要的字或是句子才會進行使用 <em> 標籤,如果要整大片使用斜體就使用 CSS 的 font-style 來進行改變吧! 在日後維護也比較方便,但是一般我們在進行開發其實我們非常非常少使用 font-style 屬性來把字體變成斜體,那是因為斜體對讀者的閱讀體驗不太好。

CSS 的 font 複合屬性寫法如何使用?

CSS的 font 複合屬性寫法如何使用

font ( 字體 ) 複合屬性能夠讓我們的代碼能夠寫得更加簡潔,在之前我們使用一個 font-size 或是font-style 都要先打出這個屬性的名稱,後面才接下去寫屬性的功能,如果每個都寫是不是代碼越變越多,在往後維護時候也不太容易,為了讓代碼寫得更快更有結構性甚至後期維護更加容易,就出現了 font 複合屬性的寫法。

那接下來我們來示範之前所學的綜合練習用法例如你的老闆說我想要改變 <p> 段落字體的:

  • 字體要加粗
  • 字體要斜體
  • 字體要 18 像素
  • 字體樣式要微軟雅黑

好的我們接受到了這樣的命令,接下來來開始撰寫 HTML + CSS 代碼試試看

點我瞭解 小青如何每月多賺5位數台幣

<style>
	p {
	font-weight: 700;
	font-style: italic;
	font-size: 18px;
	font-family: "Microsoft yahei"; 
}
</style>
<body>
	<p>我是段落標籤</p>
</body>

完成之後我們打開網頁看看老闆說的效果有沒有都呈現出來,如果沒有看看你單字有沒有打錯,如果沒有打錯還是顯是不出來再看看有沒有忘記加分號,如果都沒有問題和錯誤恭喜你完成了,是不是覺得要打四行覺得好像有點麻煩,不用擔心下列我來寫給你看一行就搞定的寫法。

font複合屬性一行寫法格式:

p {
	font: font-style font-weight font-size/line-height font-family;
}

是不是我們能夠用一行就搞定,不用像之前那樣要用什麼就全部都打出來,但是還是有一項缺點就是你需要按造順序的寫出來,第一個會寫 font-style 第二個會寫 font-weight,第三個寫法 font-size/line-height 最後才是 font-family 這是 font 的語法規範,你必須按順序去寫不能隨意顛倒順序否則會無法執行。

font 依照順序執行

  1. font-style
  2. font-weight
  3. font-size/line-height
  4. font-family

那我們來試試看 font 的簡潔寫法如何寫吧!

p {
	font: italic 700 18px "Microsoft yahei";
}

是不是之前的寫法一大陀,現在只需要一行就能夠寫完看起來也清爽非常多! 為什麼不學呢?! 但需要記一下順序,如果不按照順序的去書寫的話就會大亂,不信的話你自行試試看,就像今天第一個生的孩子是大兒子順序是一,他能夠改變順序去當二兒子嗎? 當然不行呀! 已經註定了。

但你可能會問我了,那今天我有些 font 屬性我用不到呀?! 那怎麼辦呢? 可以的但是有前提,前提是你能夠省略 font-style 和 font-weight,就是不能省略 font-size 和 font-family 屬性,否則 font 簡約寫法無法發動功能唷!

  • 可以省略 font-style 和 font-weight
  • 可以省略 line-height
  • 不能省略 font-size 和 font-family 屬性
  • font 屬性與屬性之間必須使用空格格開

CSS 的 font 字體屬性總結

CSS 的 font 字體屬性總結

經過一連串的學習 CSS fonts 字體屬性,我們把最常用的都拿出來說怎麼字體改變、透過什麼樣的屬性可以改變字號 ( 字體 ) 的大小呢? font-weight 屬性是透過什麼樣的方式來控制粗細度呢? 一般前端人員都用英文還是數字呢? 在來是思考字體的風格 font-style 常用嗎?

以上有哪三種屬性是功能跟 HTML 標籤會有重複的呢? 以及重複了但是為什麼不影響前端人員的應用你能個別說出他們的應用場景嗎? 到最後我們還說了 fonts 是有簡約的寫法方式為什麼要用簡約寫法有什麼有缺點呢? 以上這些問題你都能夠回答小青就說明你完全掌握了 CSS fonts 的所有用法也是最多人用的方法,CSS fonts 功能其實還很多但不要全部都學,學最多人用的方式就好了。

如果你還沒掌握,發現有些問題回答不出來沒關係你不緊張,因為你發現你還有哪些不足的地方再回到該小節進行複習就好了,在多加練習並思考為什麼當初開發者要開發這個功能的本質,加油加油我相信你可以的! 共勉之。

點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響