CSS保健室|font-family


Posted by itiswonderfall on 2021-11-20

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 詳細介紹


#css #css保健室 #font #font-family







Related Posts

分類相似語法

分類相似語法

[Alpha Camp] 電商網頁切版初體驗

[Alpha Camp] 電商網頁切版初體驗

[General] 在 Windows Terminal 安裝 vim編輯器懶人包

[General] 在 Windows Terminal 安裝 vim編輯器懶人包


Comments