CSS font-family 詳細介紹

字體,是網頁排版中最重要的元素之一,本篇文章將會針對 CSS 的 font-family 進行詳細介紹 ( 包含 generic-family、font-face、unicode...等 ),希望幫助大家在跨平台瀏覽或是做些特殊排版時,能更輕鬆的使用網頁字體,能讓網頁內容更清楚更精彩。

如果對字體的單位有興趣,可以參考:一次搞懂 CSS 字體單位:px、em、rem 和 %

基本用法

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

Windows 和 Mac 都支援的英文字體

如果不喜歡預設字體,也可以直接寫出自行名稱套用,下列英文字體通常在我們的電腦中預設都有安裝,不論是Mac 還是 Windows 都通用,支援度都在 90% 以上,使用起來比較不會有問題。

範例:Windows 和 Mac 都支援的英文字體

常用的中文字體

英文字體因為字母少,所以預設支援的也比較多,中文字就不同了,一款中文字的字數遠大於英文,所以在跨平台的顯示也會有所不同,這也是在製作網頁常見的困擾 ( 在 Mac 設計得很好看,到 Windows 就走樣了 ),以下列出常用的中文字體名稱,部分瀏覽器使用上可以用中文,但保險起見,最好是使用英文名稱或是中英文一起使用。

範例:常用的中文字體

如何使用外部字體

如果預設的字體都無法滿足精心設計的版面,這時就需要使用外部的字體,要使用外部字體有下列三種方式:

好用又免費的外部字體

既然知道了可以使用外部字體,就來看看有哪些好用的外部字體可以用,基本上英文字體免費版本沒有第二選擇,首推 Google Fonts,進入網頁後在左側字體清單可以預覽字體,右側選單則可以篩選字體。

如果是中文字體,可以前往 justfont 購買,或也可使用 Google 提供的一些免費中文字體,目前除了 Noto Sans TC 這組,其他在 Google Fonts 上頭找不到,但相關連結還是可以用,範例與連結如下:

@font-face

@font-face算是 font-family 裡比較進階但又頗重要的用法,@font-face可以讓我們使用電腦裡的字體檔 ( 字體檔是像 woff、ttf 之類的檔案 ),或和網路上的字體檔互相搭配使用,亦可一併指定粗體、斜體等樣式,如果透過unicode-range的方法,更能指定某些字元套用特定字體,讓網頁的設計更具備靈活的彈性。

下方的 CSS 是@font-face的基本用法,定義了一個客製化的字體名稱 oxxo,當 h1 套用了這個字體,會優先使用本地端的 Arial 字體檔,如果沒有該字體檔,則會使用第二組 aaaa.woff,如果又沒有,則會使用第三組 bbbb.ttf。

@font-face {
  font-family: oxxo;
  src: local("Arial"),
  url(aaaa.woff),
  url(bbbb.ttf);
}

h1{
  font-family:oxxo, serif;
}

這裏比較需要注意的是,每組@font-face定義字體檔只會套用一種 ( 先找到就先套用 ),跟套用字體有些不同,以剛剛上面的例子來說,如果瀏覽網頁的電腦有 Arial 字體檔,那麼後方 aaaa 和 bbbb 都不會套用,但在 h1 那行的 CSS 就比較不同,那行表示如果文字「不支援」 oxxo,就使用 serif,這邊比較容易誤會。

如果還是搞不清楚,可以用下面這個例子來試試,我在網路上找了一個中文的日文字體 setofont.ttf,如果把@font-face寫成下面這樣,就完全無法套用 setofont.ttf,為什麼呢?因為我的電腦裡有 Arial 字體檔咩,然後又因為 Arial 不支援中文,最後呈現的結果就是通用字體 serif

@font-face {
  font-family: 'oxxo';
  src: local('Arial'),
    url('setofont.ttf');
}

h1{
  font-family:oxxo, serif;
}

如果要套用,就要改成下面的寫法,如此一來就是指定 setofont.ttf 的字體檔名稱為 oxxo ( font-family 識別用 ),套用時如果順利連結該 ttf,就會成功套用。

@font-face {
  font-family: 'oxxo';
  src: url('setofont.ttf');
}

h1{
  font-family:oxxo, serif;
}

如果把@font-face稍微寫得像下面這樣有些複雜,如果仔細看,只是同一種字體但分為四種不同格式,在格式後方加上更清楚的 format 標記,format 標記用意在輔助瀏覽器識別,如果瀏覽器不支援該格式,將會直接跳過這個字體,省去下載字體檔案的時間,如果沒有指定 format 的話,瀏覽器會把字體下載之後才判斷是否要使用該字體檔案 ( 各種字體對應的 format 直接寫在下方程式碼內了 )。

然而像是 SVG 的字體,如果有標記 id 在其中,亦可在字體名稱後方加上#來指定特定 id 字體,此外,除了可以透過src定義字體檔,也可以使用font-weightfont-style定義字體特性,讓瀏覽器在解析字體時,只下載有在網頁上被使用的字體檔 ( 並非做 CSS 設定,而是進行篩選使用 )

@font-face {
  font-family: '自定義名稱';
  src:  url('fonts/xxxxx.eot') format('embedded-opentype'),
    url('fonts/xxxxx.ttf') format('truetype'),
    url('fonts/xxxxx.otf') format('opentype'),
    url('fonts/xxxxx.woff') format('woff'),
    url('fonts/xxxxx.svg#hello') format('svg');
  font-weight: normal;
  font-style: normal;
}

使用 @font-face 的 unicode-range 設定某些字的特定字體

有時在進行網頁版面編排時,會遇到中英文混雜的狀況,如果只是要讓中文和英文用不同字體呈現,作法其實很簡單,只要在 font-family 把英文字體寫在中文字體前面,就可以將中文與英文的字體區分開,以下面的例子來說,一開始的「我愛吃」三個中文字,Arial 字體並沒有支援,所以就會套用後方的 PingFang,接著遇到了「Apple」這個英文字,Arial 字體就支援,就會以 Arial 字體呈現,最後的「啦」也是中文字,所以又會套用 PingFang 體,依此類推。

<style>
  h1{
    font-family:Arial, PingFang, sans-serif;
  } 
</style>

<h1>我愛吃 Apple 啦</h1>

不過如果只有英文字,要讓某些英文字母字體不同 ( 例如「Windows」的「w」要和其他字母不同 ),或是只有中文字,要讓某些字長相特別 ( 例如「我愛你」的「愛」要特別一點 ),就必須使用@font-faceunicode-range,由於電腦每個字元都會對應一個 unicode,所以如果指定對應的 unicode 或 unicode 區間,就能讓該字元套用指定的字體unicode-range 有下列幾種寫法:

unicode-range 說明
U+316 單一字元
U+316-3FF 某個字元區間
U+3?? 某個 U+3 開頭的字元 ( U+300~3FF )
U+216-266, U+3?? 用逗號聯集不同區間

下面的例子使用@font-face創造兩個字定義的字體,t1 表示「愛」這個字使用 KouzanBrushFont.ttf 這組字體,其餘使用 Pingfang,而 t2 表示英文大寫 W 和小寫 w 使用 setofont.ttf 這組字體,其他使用 Times。

範例:使用 unicode-range 讓不同字元套用不同字體

查詢某字元的 unocide:Unicode Cgaracter Table

@font-face {
  font-family: t1;
  src: url(KouzanBrushFont.ttf);
  unicode-range: U+611B;
}

@font-face {
  font-family: t2;
  src: url("setofont.ttf");
  unicode-range: U+0057,U+0077;
}

h1 {
  font-family: t1, t2, Times, PingFang, sans-serif;
  font-size: 50px;
  font-weight: normal;
}

小結

整體來說這篇文章應該已經包含所有 font-family 的用法,目前我正在整理一些免費且有趣的中文字體,完成後會再寫篇文章分享給大家。

有興趣瞧瞧其他新文章嗎?