過去在「網頁中文字型除了微軟正黑體, 還有這些好選擇！」曾提過，網頁若使用「作業系統」以外的字體，由於中文字型檔案太大，會影響網頁載入速度。後來 Google Fonts 免費讓「讓思源黑體可直接外連」，使用 Google 的 CDN 伺服器肯定比自己找網頁空間的連線速度快，漸漸也越來越多站長在網站使用思源黑體。
這些年來網頁技術不斷翻新，以往載入中文字型的不便逐漸得到抒解，例如網路傳輸速度的進步、外部字型未載入之前先顯示預設字型等等，似乎在網頁上使用「非作業系統」字型看到了希望。
不過從這些簡單推導就驟下結論是危險的，本篇還是進行了多方深入研究及測試，整理出一些看法讓站長們評估後做決定。
(圖片出處: Google Fonts)
一、安裝方式
1. 引用字型檔
請參考「思源黑體」官網：
最簡單的引用方式，在範本中
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC" rel="stylesheet"/>2. 設定字型 CSS
網頁想要使用「思源黑體」的那個區塊，設定以下 CSS 即可：
font-family: 'Noto Sans TC', sans-serif;詳細的設定範例，可參考「網頁中英文字型跨平台設定最佳化」→「六、依網頁不同區塊設定 font-family」
二、優化載入方式
試著將以上語法裝在測試網頁上跑跑看，設定文章區塊使用思源黑體，結果第一次執行就看到悲劇，整個網頁就只有文章區塊一片空白，等待幾秒鐘字型下載後才顯示出來，該怎麼辦呢？
1. font-display 解決空窗期現象
這篇「使用 font-display 改善與優化網站效能」說明了 CSS 新功能 font-display，例如設定 swap，就可讓思源黑體完全載入前，先顯示預設字型，不會看到一片空白了。
這裡沒有很推薦設定為 fallback，雖然載入字體的時間最多只等 3 秒，但還是會有一小段空窗期。
需要注意的是，font-display 在比較新的瀏覽器版本才支援，且微軟體系都不支援 (IE、Edge)。
2. 修改思源黑體 CSS
很可惜的是，拆解思源黑體的外連 CSS 檔內容後，並沒有發現 font-display 的設定：
https://fonts.googleapis.com/css?family=Noto+Sans+TC由於 font-display 必須放在 @font-face 的括號之中，所以要實現這個功能，必須手動將這個 CSS 檔的內容複製出來，一個個在所有 @font-face 之中加入 font-display 的設定，最後將所有 CSS 內容貼到範本中，比較麻煩一些。
由於 CSS 內容太大 (超過 100k)，不適合放在本篇，我另外整理了一篇「網頁安裝思源黑體﹍CSS 最佳化實作」，可直接拿程式碼套用。
希望將來 Google 把 font-display 加入 CSS 檔，或是提供參數來設定，畢竟這功能滿重要的。
2019.7.7 更新：這篇「Google Fonts and font-display」找到 Google 留下的後門，可在連結加上參數，例如使用以下語法即可自動加上 CSS 參數 display: swap：
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet"/>3. 思源黑體將字型檔拆分成小檔
拆解檔案的過程，發現 Google 這一點做的很棒，把一個字型檔拆成上百個小檔(這也是 CSS 內容超過 100k 的原因)，他的原理可參考「讓網頁顯示特定中文字型﹍安裝實作教學」，設定了 unicode-range。
意思就是將字型檔內的所有中文字分成上百個區段，網頁上文字有用到的區段，才下載那個區段的字型檔，這樣可以避免下載整個大檔，加快網頁載入速度。
同時這也可確保了網站在顯示首屏的內容時，這樣的文字量可以在讀取最少字型檔的情況下，以最快的速度顯示出思源黑體。而非首屏的文字由於暫時還不需顯示，且字型檔是動態載入，不太會影響到訪客的閱覽體驗，也就是不太會有遲滯感。
4. Google Fonts 的思源黑體、思源宋體
除了思源黑體，Google Fonts 還提供另一套免費的中文字型「思源宋體」：
經查驗過引用的字型外連，「思源宋體」一樣把字型檔拆成上百個小檔，可以加快載入速度，所以這兩者都是可以考慮使用的雲端字型。
未來站長們可以持續關注 Google Fonts 是否釋出更多的中文字型，且使用同樣的字型處理技術，就能有更多的雲端中文字型選擇。
三、實測感想
Google Fonts 很久以前就發佈，字型檔因歷來版本的不同處理方式也不一樣，以下是各種不同狀況的實測心得：
1. 載入完整字型檔
最早的 Google Fonts 字型檔外連，必須一次載入完整的檔案，可能將近 10MB，例如：
https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css網頁使用這個中文字型時，就真的是悲劇了，不但一開始一片空白，而且依照網路的速度，可能要等 10 秒鐘或更久，才能顯示這些字。
雖然瀏覽器有快取，再次進入同網站的其他頁面，就不用重新下載字型。但仍有這些缺點：
- 網站流量來源主要是 SEO 時，代表訪客大部分都是第一次到訪，那麼初體驗都會很差。
- 瀏覽器快取有時效、容量限制，超過時還是會重新下載
- 習慣用無痕模式的訪客可能也要重新下載
所以我建議先閱讀中文字型外連的內容，如果沒有拆成小檔的話，就避免使用該字型。
2. 沒有使用 font-display
思源黑體目前的官方連結已經拆成上百個小檔，所以適合使用。但如前所述，直接引用的話，因為沒有 font-display 參數，網頁上的文字還是會有一段時間是空白的。
根據我的實測環境，網路下載速度為光世代 6M，瀏覽器首次讀取的空白期大致為 2~3 秒內。
如果網路環境是 WiFi，時間可能會更長。
3. 有使用 font-display
目前本站的內文區塊，暫時放上思源黑體，且設定了 font-display: swap，看起來的效果還不差，會先顯示預設字型，然後很快變成思源黑體，這是最推薦的作法。
四、網頁中文字型缺點整理
雖然思源黑體最佳化的作法已經找出來了，但網頁中文字型的問題其實還很多，以下一一列出。
1. 瀏覽器字型支援度
分析思源黑體的 CSS 後，發現使用的字型檔是 woff2 格式，可參考官網說明「網頁字型最佳化」，優點為：
- 使用最新的演算法
- 壓縮比例更低，檔案可以更小
- 相較之下 woff2 字型在不同字體大小，細節的平滑度可以比作業系統字型展現得更完美
那麼缺點也很致命，請參考「WOFF 2.0 - Web Open Font Format」：
- IE 不支援
- 瀏覽器高版本才支援
- 行動裝置作業系統高版本才支援
代表有一部份訪客看不到 Google Fonts 提供的思源黑體。
2. 瀏覽器 CSS 支援度
如前所述，font-display 並非標準規格，新的瀏覽器版本才支援，且微軟家族不支援，所以注定會對一定比例的訪客，帶來不夠好的使用體驗。
3. 行動裝置體驗
其實行動裝置的預設字型已經滿好看了，無論是 Android 或 iOS。現在強制訪客使用思源黑體，會有這些缺點：
- 手機的傳輸速度不比 PC，會慢一些
- 而且很多人的機型可能很舊、會更慢
- 手機傳輸量越少越好，額外下載中文字型是非常大的負擔
- 畢竟現在手機的網頁載入速度佔據 SEO 很大的評分
- 有的人手機會設定流量控管額度
- 有的人會設定 APP 不更新以節省流量，所以瀏覽器多半不會是最新版本，就不會支援 font-display
所以行動版網頁，個人覺得避免使用特殊中文字型比較好。
4. 中文 webfont 雷人記事本
以下是專業網站「要改的地方太多了，那就改天吧」做的詳細整理：
- 免費的圓體 webfont 在 iOS 上面有雷
- 一個黑體各自表述 → 網頁顯示效果不好預期
- 那些被 GFW 和諧的 Webfont 們 → 特定國家會封鎖外連
- 瀏覽器設定導致 webfont 無法顯示
- 中文字做 CSS3 scale, skew, rotate, animation 時各種狀況
- 第三方服務的風險 → 花了錢也不一定完美
- 除了怕瀏覽器 render 中文字的地雷，還怕缺字 → 網頁中文字型一定比不上作業系統的字齊全
5. 其他問題
2019.1.16 補充：
使用非作業系統的中文字型，還需要小心是否為可在網頁免費使用的字型，必須詳讀字型的授權範圍，以免不小心侵權。
五、中文字型最好的作法
網頁中文字型我認為 Google Fonts 已經是 "最適" 的作法了，如果要說效果 "最好" 的方案，簡單介紹以下這幾種，第 1 個免費，後面 2 個付費。
1. 字蛛
官網：http://font-spider.org/
他的原理是自製一個字型合集，只放入某頁面會使用到的中文字，讓下載量達到最小化，可參考這篇的介紹「字蛛+发布！支持动态渲染、远程多页面字体压缩」。(剛好這個連結文字就是絕佳反例，思源黑體無法顯示簡體字，改為顯示作業系統字型)
但是除了製作上不方便，還要自己找網頁空間放，實用度低，不適合部落格，只適合形象、活動網站，這類使用文字比較固定的網站。
2. Just Font
官網收費頁面：Just Font
使用「字型合集」的相同原理，會自動抓頁面使用的中文字，讓網頁下載流量達到最低。
特點整理：
- 有試用額度，沒有每月免費使用額度
- 費用相對較低，最低一年 348
- 有非常多字型可選擇
3. Adobe Fonts (Typekit)
官網：Adobe Fonts
由於 Adobe 沒有中文說明，因此請參考這篇「為網站載入 Typekit「思源黑體」中文網頁字型，提升文字顯示質感」的介紹，特點整理如下：
- 免費版每月額度為 25000 瀏覽數，一般部落格綽綽有餘，但沒有「字型合集」的最佳化功能
- 根據這篇「中文WebFont概況與小技巧」，付費版才有自動組成「字型合集」的功能，讓網頁下載流量達到最低
- 一年費用至少 USD 50
- 雖然費用比較貴，但相對而言 Adobe 是世界級的公司，相信伺服器的速度會比較快、更穩定。
六、總結
閱讀這麼多資料之後，終於可以下結論了：
- 慎選網路中文字型 → 如果必須下載整個字型檔，建議摒棄該字型
- 自己手動拆解 CSS 內容，務必加入 font-display: swap
- 行動版網頁避免加載外部中文字型
- 如果有經費的話，就付費使用雲端字型服務，畢竟費用不多，自己也省下麻煩
- 對於商業、形象網站，使用特殊字型有加分效果，這筆投資是划算且必要的(但先請設計師做整體規劃比較好)。
- 如果是提供資訊為主的部落格網站，只要覺得原作業系統的字體清楚、不難看，那麼沒有建議一定要使用外部字型，畢竟前端地雷太多。
- 如果網站原本外掛已經很多，載入速度已經不快了，建議別雪上加霜，讓負擔更大。
- 如果網站是自己看了心情愉快比較重要，那麼可選擇手動自己處理字型 CSS，也可花點小錢犒賞自己。
更多「字型」相關文章：
Wayne Fu 大大，我發現了你的文章好像有不太對的地方。
回覆刪除Google其實有提供[font-display: swap]的選項，這也是我最近發現的。
只要在網址後加上[&display=swap]，[font-display: swap]就會加入在檔案裡了~~
不過奇怪的是，Blogger似乎不接受link的方式新增，僅接受@import url的方式。(神秘的限制)
如果使用link的話就會出現[The reference to entity "display" must end with the ';' delimiter.]的錯誤訊息~~~~~
所以.....還是用CSS @import url 好了...