2019
09
23

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

關鍵字:CSSfont-family字型

基本用法

使用 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,但因目前支援度與用途不廣,就不在這裡做介紹。

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

傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.