網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析

過去在「網頁中文字型除了微軟正黑體, 還有這些好選擇！」曾提過，網頁若使用「作業系統」以外的字體，由於中文字型檔案太大，會影響網頁載入速度。

後來 Google Fonts 免費讓「讓思源黑體可直接外連」，使用 Google 的 CDN 伺服器肯定比自己找網頁空間的連線速度快，漸漸也越來越多站長在網站使用思源黑體。

這些年來網頁技術不斷翻新，以往載入中文字型的不便逐漸得到抒解，例如網路傳輸速度的進步、外部字型未載入之前先顯示預設字型等等，似乎在網頁上使用「非作業系統」字型看到了希望。

不過從這些簡單推導就驟下結論是危險的，本篇還是進行了多方深入研究及測試，整理出一些看法讓站長們評估後做決定。

(圖片出處: Google Fonts)

一、安裝方式

1. 引用字型檔

請參考「思源黑體」官網：

• Noto Sans TC

最簡單的引用方式，在範本中 </head> 的前一行，插入官方提供的引用連結：

<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 還提供另一套免費的中文字型「思源宋體」：

• Noto Serif TC
• 網頁安裝思源宋體﹍CSS 最佳化實作 + 展示頁面

經查驗過引用的字型外連，「思源宋體」一樣把字型檔拆成上百個小檔，可以加快載入速度，所以這兩者都是可以考慮使用的雲端字型。

未來站長們可以持續關注 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，也可花點小錢犒賞自己。

更多「字型」相關文章：