CSS保健室｜font-family

font-family

忍術有五行遁術，常用的通用字剛好也有五種，而施放術式都要通過結印了，設定網頁字體怎麼能馬虎呢？就讓我們來好好認識一下 font-family 吧。

（ 圖片來源 ）

font-family 規定元素的字體。

font-family 需要設定 family-name（ 字體名稱 ）和 generic-family（ 通用字體 ）， font-family 可以設定一種字體或多種不同的字體，每種字體間用半形逗號「 , 」隔開，當瀏覽器載入網頁樣式時，會從左邊第一個字體開始判斷，如果沒有對應的字體，就直接採用下一種字體，如果到最後都沒有可用的字體，就採用電腦預設字體，這時就可以透過 generic-family 來指定哪種預設字體。

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

上面這行 CSS ，字體名稱時不用加上雙引號，但如果你的字體名稱中間空格，就一定要加上雙引號。

generic-family 通用字

通用字會寫在 font-family 的最後面，作為最終的選項，當然不設定通用字也是可以，屆時將自動採用系統預設字體，也會導致不同作業系統顯示的結果有所不同。

常用的通用字有五種，分別是 sans-serif （ 無襯線體 ）、serif （ 襯線體 ）、 monospace （ 等寬體 ）、cursive （ 手寫體 ）和 fantasy （ 幻想體 ）。

襯線體 serif 、無襯線體 sans-serif

襯線 serif 指的是字形筆畫末端的裝飾部分，因為 sans 在法語中代表「 無 」，所以 sans-serif 也就是無襯線體，與襯線字體相反，無襯線體完全拋棄裝飾襯線，只剩下主幹。

襯線體 serif

Windows 和 Mac 都支援的英文襯線字體： Georgia 、 Times New Roman 、 Times

字體	範例
Georgia
Times New Roman
Times

無襯線體 sans-serif

Windows 和 Mac 都支援的英文無襯線字體： Arial 、 Arial Black 、 Arial Narrow 、 Impact 、 Trebuchet MS 、 Tahoma 、 Verdana

字體	範例
Arial
Arial Black
Arial Narrow
Impact
Trebuchet MS
Tahoma
Verdana

等寬體 monospace

等寬字體表示所有的字母、數字都是同樣的寬度，對於中文而言，每個字在設計上大多都是等寬，但英文例如說 W 和 i 的寬度就差很多，這也造成有時在排版上的一些困擾，如果指定 monospace ，就會自動套用系統預設的等寬字體。

等寬體 monospace

Windows 和 Mac 都支援的英文等寬字體： Courier New

字體	範例
Courier New

手寫體 cursive 、幻想體 fantasy

手寫體和幻想體其實有點像，手寫體就比較像是毛筆或鋼筆寫出來的感覺，以中文來說預設的手寫體通常就是標楷體，而幻想體就是在手寫之外，更多了一些裝飾或紋路在字體上頭，大多數的中文預設不支援幻想體，會自動使用襯線體或無襯線體取代。

手寫體 cursive

Windows 和 Mac 都支援的英文手寫字體： Comic Sans MS

字體	範例
Comic Sans MS

幻想體 fantasy

Mac 支援的英文幻想字體： Copperplate 、 Papyrus

字體	範例
Copperplate
Papyrus

常用的中文字體

部分瀏覽器使用上可以用中文，但保險起見，最好是使用英文名稱或是中英文一起使用。

Windows

字體	範例
微軟正黑體（ Microsoft JhengHei ）
新細明體（ PMingLiU ）
標楷體（ DFKai-SB ）

Mac

字體	範例
蘋方（ PingFang ）
黑體（ STHeiti ）
楷體（ STKaiti ）
儷黑 Pro （ LiHei Pro ）
儷宋 Pro （ LiSong Pro ）

參考資料

CSS font-family 詳細介紹