淺談網頁字型，挑選及使用，font-face、font-family

近期在重刻部落格時，也面臨挑選一個適合網站的字型，主要針對繁體中文及英文兩種語言。

在選擇時，就有必要先了解一下字型的基本知識，以及怎麼把這些字型加入到網站當中。

字型基礎概念

在英文字型中，有一些常見的分類，例如：Serif、Sans、Mono。

在印刷品中，常常會用有襯線的字型，所謂 Serif 就是襯線的意思。例如經典的報紙字型 Times New Roman，給人的感覺會比較正式、古典一些，因此適合作為印刷品的字型，或是長文閱讀使用。

而 Sans 在法文中是「無」的意思，在字型分類中的全稱為 Sans-serif，也就是無襯線。在瀏覽器中，使用 Sans 這樣的無襯線字型就更為常見，例如 Arial、Helvetica 這樣的字型就屬於 Sans-serif，會給人比較俐落、簡潔，現代感強一些的感覺，適合於現代的網頁字型。

另一種字型叫做 Monospace，簡稱 Mono，意味著等寬字型，最常見的用途就是在顯示程式碼了，像是 Courier New 及 Consolas。

除此之外，也有像是手寫的字型、專門作為標題的字型等等。

而中文字型也大致可以做一些分類，例如明體或宋體就類似於 Serif 這樣有襯線感的字型；而黑體類似 Sans-serif 較為現代、簡潔。

那麼要怎麼挑選一個合適的字型呢？那就全憑個人喜好了，我個人看 Sans-serif 的字型比較順眼，尤其是要做科技部落格這類較為現代感的網站，我會從 Sans-serif 的字型中挑選，並且在手機版的閱讀上，無襯線的字型會更為清晰一些。

再來一點則是網站中顯示的不同語言，除了選用的字型風格要類似，粗細及 x-height 也要接近。所謂 x-height 就是字母的主體高度，如同英文 x 的高度，如果過低而和中文放在一起顯得太小，這兩種字型就不太適合彼此。

在網頁中載入字型

假設我們挑了一套由 Google 和 Adobe 共同開發的開源中文字型，叫做 Noto Sans TC 的字型，怎麼在網頁中使用？

我們可以在 CSS 中加入以下內容

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

body {
font-family: 'Noto Sans TC', sans-serif;
}

接著可以透過 @import 直接從 Google CDN 中載入 Noto Sans TC，並且在 Body 中設定。

然而這種做法有個缺點就是有依賴，如果離線狀態就無法使用。

第二種方式是先下載後自己管（Self-Hosting），可以先到一個不錯的開源的網站 Google webfonts helper（https://gwfh.mranftl.com/）下載想要的字型。

詳細步驟如下：

首先搜尋到 Noto Sans TC，選擇我們想要的語言，包含繁體中文及英文（chinese-traditional 及 latin）

之後在 Step 3 中選擇不同的 Support，包含預設的 Modern Browsers，或是 Legacy Support、Historic Support，若是選擇 Modern Browsers，則等等下載的內容就會包含 .woff2 的檔案，選擇其他較舊版本的換則會有 .woff、.ttf 等檔案，這裡我們就直接選擇 Modern Browsers。

在 Step 4 Download files 中，最終得到 noto-sans-tc-v36-chinese-traditional_latin.zip 的壓縮檔，解壓縮後能看到有 4 個檔案（如 noto-sans-tc-v36-chinese-traditional_latin-300.woff2），就是剛剛所選取的 4 種 Styles（300, regular, 500, 700），每個檔案約 1MB 大小，將其都放到 fonts/ 目錄下。

最後將 @import 改成 @font-face，就能用自行託管的方式來提供字型。

@font-face {
  font-family: 'Noto Sans TC';
  src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
}

那麼，什麼是 @font-face 呢？

Font face

所謂 @font-face 是在 CSS 中定義和註冊自訂字型的方式，@ 代表 at-rules，用來做定義、匯入等等和一般樣式設定不同的操作。

例如，原本透過 @import url(https://fonts.googleapis.com/...); 的方式從 Google 的 CDN 中下載並匯入字型，在我們自行下載了字型後，就可以使用 font-face 來定義。

@font-face {
  font-family: 'Noto Sans TC';
  src: url('/fonts/noto-sans-tc-v36-chinese-traditional_latin-regular.woff2') format('woff2');
  font-display: swap;
}

在經過 @font-face 的註冊後，我們後續使用 Noto Sans TC 就會用到，如在 body 設定 font-family: 'Noto Sans TC', sans-serif; 時，這裡的 Noto Sans TC 就會是我們所註冊的。

最後來談談在「設定」時所用到的 Font family 相關概念。

Font stack / Font family

Font Stack 是在設定 font-family 時，瀏覽器會由左到右依序嘗試，例如我們設定

body {
  font-family: 'Noto Sans TC', ui-sans-serif, system-ui, sans-serif;
}

瀏覽器會首先載入 Noto Sans TC，如果已經載入完成當然就直接使用，但在考慮網路連線的限制，有可能會下載字型時速度緩慢甚至失敗，為了能正常顯示，瀏覽器會依序使用右邊的字型，直到前面的字型載入成功再切換回來。

上述的使用先後順序，像是要不要等待字型載完、載完後切回優先級高的字型，可以透過 font-display 來設定。

例如 font-display: swap 就是先顯示系統字型，等到目標字型載入完成後就立刻切換，其他屬性還包含 block、fallback 等等，block 會最多等 3 秒再顯示文字、fallback 則最多等 100ms，等不到就不會切回來。

分別使用中英文字型

註冊完字型，並透過 Font stack 設定字型的載入邏輯，在網站中使用字型的基本概念就講的差不多了，但有一件事值得再提一下。

我們剛剛下載的是包含 Traditional Chinese 及 Latin 的 Noto Sans TC 字型，這是否就包含了英文字型呢？

只能說包含部分的英文字型，而且外觀不一定非常理想，畢竟 Noto Sans TC 是繁中的專用字型，其包含的英文字型只能說是配套。

更好一些的做法是用專門的英文字型，例如 Inter 這個 Sans-serif 字型和 Noto Sans TC 就算是蠻搭配的。

因此我們可以照著上述步驟，不論是透過字型 CDN，或是直接抓下來 Self-Hosting 都行，最後再把此英文字型加到 Family 當中：font-family: Inter, 'Noto Sans TC', ui-sans-serif, system-ui, sans-serif;