第五章：字型（1）

第 11 屆 iThome 鐵人賽

DAY 19

Modern Web

CSS大全閱讀筆記系列第 19 篇

11th鐵人賽

Camellus

2019-10-05 19:13:12

2218 瀏覽

分享至

使用字型：
a. 利用font-family屬性來使用任何可用的字型，會套用到指定元素，再透過繼承機制，套用到指定元素的所有子代與後裔元素，除非有其他宣告覆寫字體設定。
b. 通用字型：
- CSS定義了五種通用字型，如果不在意使用的字型，可直接指定使用，不過通常都用作指定字型無法使用的備案，放在font-family的最尾端，作為最後一道保險，就像p {font-family: ......, san-serif;}。
- 襯線體（serif font）：有襯線的比例字體，比例字體是指每個字元會依字元形狀而有不同的寬度，襯線則是指每個筆畫開頭或結束時的裝飾，使用時寫成font-family: serif;，英文中Times、Georgia都是這類字體，中文裡的宋體、明體基本也屬於此類。
- 非襯線體（san-serif font）：無襯線的比例字體，使用時寫成font-family: san-serif;，英文中常用的像是Helvetica、Verdana、Arial，中文的黑體、圓體都是屬於非襯線體。
- 等寬字型（Monospace font）：非比例字體，每個字元都佔有相同寬度，包含了襯線體與非襯線體，使用時寫成font-family: monospace;，中文字元一般屬於等寬字體，但中英混用時，英文字元不一定是等寬字體。
- 草書字體（Cursive font）：這類字體通常包含大量的曲線或比襯線體更多的裝飾筆畫，使用時寫成font-family: cursive;，英文中Comic Sans就是很代表性的草書，中文裡楷書也屬此類。
- 花俏字型（Fantasy font）：又稱裝飾字，基本上不屬於前四類的字型，都會被歸到此類，在瀏覽器中也會把無法明確歸類到前四項的字體，分屬到此類，使用時寫成font-family: san-serif;。
c. 指定字型：
- 當有明確想使用的字體時，可以直接用font-family指定使用字體。
- 當使用者端沒有網頁作者設定的指定字體，使用者代理就會顯示預設的使用者代理字型。
- 為避免上述情況，可以在font-family中指定多個外型相似的字體，以半形逗號分隔，以降低此情況的發生。使用者代理會依照font-family中排列的順序選擇字體，忽略使用者端沒有的字體，直到找到使用者端可使用且網頁作者也指定的字型套用，因此可在最尾端加上通用字型關鍵字，作為最後一道保險，例如p {font-family: 'Helvetica Neue', Helvetica, Arial, san-serif;}。
d. 引號的使用：
- 一般情況下，字體名稱不需要加任何引號。
- 當字體包含空白、分隔線等特殊符號時，建議加引號，以免被使用者代理忽略，使用西式雙引號（"......"）或西式單引號（'......'）都可以。
- 通用字體不可加引號，否則會被識別成同名的指定字體，而非通用字體。
- 在<style>中使用font-family時，不能和屬性使用相同的引號，如果<style>中使用的是西式雙引號（"......"），那font-family就必須使用西式單引號（'......'），所以必須寫成<p style="font-family: 'Helvetica Neue', serif;">......</p>才正確，<p style="font-family: "Helvetica Neue", serif;">......</p>的寫法是錯誤的。