CSS font-family 詳細介紹[轉載自oxxostudio]

基本用法

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

舉例來說，下面這行 CSS，會先找第一種字體，若不支援或沒有該字體，則採用第二種字體，依此類推，最後使用通用字，從下方例子亦可以看到，字體名稱時不用加上雙引號，但如果你的字體名稱中間空格，就一定要加上雙引號。

body{ font-family:第一種字體, 第二種字體, "第三種 字體", "通用字"; }

generic-family 通用字

上面提到了 generic-family 這個專有名詞，翻譯成中文就是「通用字」，也就是在作業系統中完全找不到對應字體預設會顯示的字體，因此通用字會寫在 font-family 的最後面，作為最終的選項，當然不設定通用字也是可以，屆時將自動採用系統預設字體，也會導致不同作業系統顯示的結果有所不同。

常用的通用字有五種，分別是 sans-serif ( 無襯線體 )、serif ( 襯線體 )、monospace ( 等寬體 )、cursive ( 手寫體 ) 和 fantasy ( 幻想體 )，其他還有 system-ui、emoji、math 和 fangsong，但因目前支援度與用途不廣，就不在這裡做介紹。

想知道更多嘛!!! 趕快點擊以下網址喔!!