網路字型中對於中文字型的處理

我並不是網路字型這方面的專家，只是一位苦命的網站後端工程師。

這邊最主要只是要分享一下我使用 Google Fonts 之後的一些心得而已。

至於如何替你的網站加入 Google Fonts 當中字型，讓你的網站可以達到幾乎在所有的瀏覽器上可以有相同的視覺感。這部分就不是這篇文章的重點，看改天心血來潮在寫吧！其實如果你稍微會一點 CSS 的話直接去官網上看一下應該很容易學會的。

首先，大家都知道一個中文字型的 ttf 檔案可能就 5MB ，如果再將不同粗細的 ttf 合併為一個 ttc 檔案的話，那麼一個中文字型的檔案大小可能就高達 30MB ，這對於網頁使用使用可是相當可怕的一個檔案大小。
就算使用新一點的 woff2 格式來處理字型檔案，可以有壓縮檔案大小的效果，但是一個字型檔案的大小還是用 MB 當作單位在計算的，對於網站來說還是一個很誇張的尺寸。

幸好現在的 CSS 在設定字型檔案的時候，有了 unicode-range 可以使用，所以可以再進一步將一個包含所有字的字型檔案，切分成數十數百個檔案來提供給訪客使用，這樣就可以在進一步的減少使用者下載到不須使用的檔案的機率了。

不過一個實用的中文字型檔案，可能包含到一萬五千或是更多的字，如何切分這些字讓一個檔案的大小適當，同時使用者下載字型的時候也不用下載過多數量的檔案。如果一個檔案只包含一個字，雖然不會下載到多餘的檔案，單下載數百個檔案的傳輸負擔也是不合理的成本消耗。

廢話了一大堆，就讓我們來看看 Google 是如何切分的吧！
這邊我是抓取 Noto Serif TC 字體粗細為 500 的檔案來研究的。選用這一字形是因為這是我文章內文所使用的字形。

總計被切分為 100 個檔案。
最小的一個檔案約 1KB，最大一個檔案約 77 KB ，總計約 4MB。
一個檔案最少包含 134 個字，最多包含 214 個字。

而文字的切分，並不是單純的依照字碼順序下去切分。首先會將文字分成兩個部分。
第一個部分的文字，就是依照字碼順序下去切分，這部分有 80 個檔案。
另外一個部分，就依據一個我看不懂的準則下去切分！因為這些檔案中，幾乎都沒有兩個連續的字碼出現。

最後，完整的分割內容資訊。

同場加映 Noto Sans TC 分割內容資訊