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


Posted by vii120 on 2021-09-10

前言

有了 @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 字體檔案大小來增進網頁效能,將確定不會用到的文字直接從資源中移除,也是一個壓縮檔案的好方法 👍!


參考


#css #font







Related Posts

為 localStroage 加上過期時間

為 localStroage 加上過期時間

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

[09] JavaScript 入門 - 原型、polyfilling、transpiling、array-like

Git 與 GitHub

Git 與 GitHub


Comments