[css] 網頁字型渲染的優化

前言

有了 @font-face 之後，在網頁開發時套用 web font 的情況已很常見，google 也有推出網頁字型庫 google fonts，本篇主要分享幾種優化網頁字型渲染的方式

font-display

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url(...);
}

font-display 是用來設定 @font-face 字型的顯示方式，設定值如下：

• auto：預設值，使用瀏覽器的預設顯示方式，通常都是 block
• block：先隱藏文字（但會保留位置），載入完資源後再一次把字型套用到文字上，延伸的問題是 FOIT (flash of invisible text)
• swap：先使用瀏覽器的預設字型，邊載入資源邊將新字型套用到畫面，延伸的問題是 FOUT (flash of unstyled text)
• fallback：介於 auto 和 swap 之間，文字會先隱藏約 100 毫秒後替換成預設字型，之後視載入狀況，如果（大約）3 秒以內載入字型成功，就會套用新字型，否則就直接用預設字型，不會再改變
• optional：跟 fallback 很像，但此方式是依照瀏覽器的判斷，如果網速過慢，就直接使用預設字型，不會使用新字型

swap 的作法等於是先顯示文字後再做字型替換，畫面不會有文字空白的時間，使用體驗相對較好，也是 google font 目前所使用的方式！

備註💡 2021.09 瀏覽器支援度約 93%，參考 caniuse: font-display

font-smoothing

-webkit-font-smoothing: antialiased; /* for safari & chrome */
-moz-osx-font-smoothing: grayscale; /* for firefox */

font-smoothing 是設定文字的平滑效果，但目前標準用法只有支援 mac OS，可視開發需求使用

• auto：預設是讓瀏覽器決定處理方式，通常會是 antialiased
• none：不使用任何平滑效果，較容易出現鋸齒
• antialiased：去除文字上的鋸齒狀，文字會看起來更輕一點，也是較推薦的優化方式

以下為 Roboto weight 100 的斜體使用效果，可以明顯看出 none 文字上的鋸齒

控制字型資源大小

非 css 屬性的補充分享：載入字型最根本的不可抗力即為資源本身的大小，且中文字很多，檔案相對大，載入時也會較花時間，除了引入時使用 preload，也可以參考這篇有趣的文章：透過減少 ttf 字體檔案大小來增進網頁效能，將確定不會用到的文字直接從資源中移除，也是一個壓縮檔案的好方法 👍！

參考

• font-display | CSS-Tricks