強制讓 Google Web Font 使用 display swap，避免 Render Blocking

#1

強制讓 Google Web Font 使用 display swap，避免 Render Blocking
web font, web font icon 很好看、有趣；但是使用不當反而造成網站為了下載字型異常爆炸慢…

各大網站上的教學都是在網址參數加上 display:swap
但實際上並不是 100% 有效

<link 
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" 
    media="print"
    onload="this.media='all'"
/>

<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
  media="print"
  onload="this.media='all'"
/>
1個讚
#2

從來都不知道這個在幹嘛

看到有人這樣解釋

當 web font 還沒完全下載可用時，可以用 font-display 去設定我們想要怎麼顯示我們的字型，而 font-display: swap; 就是告訴broswer說，我們想要用替代字型，等真正的字型下載完畢再換上！

#3

對喔，不設定的話，瀏覽器會等字型下載完才繼續顯示畫面；這時候使用者的畫面就會卡一下…

但是，不曉得為什麼，這個設定常常沒有生效
所以才出現一堆奇奇怪怪的語報和設定方式 :dizzy_face:

1個讚