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

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

  襯線 serif 指的是字形筆畫末端的裝飾部分，因為 sans 在法語中代表「無」，所以 sans-serif 也就是無襯線體，與襯線字體相反，無襯線體完全拋棄裝飾襯線，只剩下主幹，造型簡明有力，更具現代感，很適用於標題或廣告，下圖可以清楚地看出，紅色凸出來的部分就是襯線。

  更多資訊可參考維基百科：無襯線字體、襯線字體

• 等寬體 monospace

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

• 手寫體 cursive、幻想體 fantasy

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

Windows 和 Mac 都支援的英文字體

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

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

• 無襯線體 sans-serif：Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana

• 襯線體 serif：Georgia、Times New Roman、Times

• 手寫體 cursive：Comic Sans MS

• 等寬體 monospace：Courier New

• 幻想體 Fantasy：Copperplate、Papyrus

常用的中文字體

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

範例：常用的中文字體

• Windows：

  • 微軟正黑體 ( Microsoft JhengHei )
  • 新細明體 ( PMingLiU )
  • 標楷體 ( DFKai-SB )

• Mac：

  • 蘋方 ( PingFang )
  • 黑體 ( STHeiti )
  • 楷體 ( STKaiti )
  • 儷黑 Pro ( LiHei Pro )
  • 儷宋 Pro ( LiSong Pro )

如何使用外部字體

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

• 使用 CSS link

  這個做法和一般載入 CSS 的作法一樣，只是把 CSS 的超連結換成字體的超連結，就能夠使用該字體。

  <link href="外部字體超連結" rel="stylesheet">
  

• 使用 @import

  運用 CSS 的@import，將要載入的外部字體超連結，寫在 CSS 內，載入後就能使用該字體。

  <style>
    @import url('外部字體超連結');
  </style>
  

• 使用 @font-face

  @font-face是使用 font-family 很重要的概念 ( 下方會繼續介紹 )，運用@font-face也可以載入外部字體並且使用。

  <style>
    @font-face {
      font-family: 自定義名稱;
      src: url(字體檔超連結);
    }
  </style>
  

好用又免費的外部字體

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

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

• Noto Sans TC ( https://fonts.googleapis.com/css?family=Noto+Sans+TC )

• 楷體 cwTeXKai ( https://fonts.googleapis.com/earlyaccess/cwtexkai.css )

• 圓體 cwTeXYen ( https://fonts.googleapis.com/earlyaccess/cwtexyen.css )

• 仿宋體 cwTeXFangSong ( https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css )

• 明體 cwTeXMing ( https://fonts.googleapis.com/earlyaccess/cwtexming.css )

@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-weight、font-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-face的unicode-range，由於電腦每個字元都會對應一個 unicode，所以如果指定對應的 unicode 或 unicode 區間，就能讓該字元套用指定的字體，unicode-range 有下列幾種寫法：

下面的例子使用@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 的用法，目前我正在整理一些免費且有趣的中文字體，完成後會再寫篇文章分享給大家。