繁體 ▾
Free, Fast & Secure Online Tools
WOFF 是 Web Open Font Format 的縮寫，而要先搞懂的第一件事是：它不是一種新的字型。它是一個外殼：一個既有的 TrueType 或 OpenType 字型，壓縮過，附上一點中繼資料，包裝成瀏覽器可以快速下載的形式。
裡面的字形沒有改變。改變的是它們移動的效率。
實務建議難得地簡單：只提供 WOFF2。網頁指南以前建議的那些舊後備——WOFF、TTF、EOT、SVG 字型——現在都是每一個訪客的瀏覽器會忽略的死重量。
TTF 和 OTF 在瀏覽器裡確實能用，但它們帶著網頁不需要的桌面包袱，而且大得多。它們屬於你的電腦，不屬於一個頁面。
這就是網頁字型不再是一個已解決問題的地方，而且值得用數字講清楚。
一個拉丁字型涵蓋大概 200 到 400 個字元——字母、數字、標點、重音。做成 WOFF2 通常是 20 到 50 KB。微不足道。
一個中文字型必須涵蓋數千個字。一個支援常用繁體或簡體中文的字型有 6,000 到 20,000 個字形，而做成 WOFF2 通常是 3 到 15 MB——而且那只是一個字重。日文和韓文相當。
那是一百倍的體積，而且它不是任何人能修好的壓縮問題：那個字型裡面真的就有那麼多張不同的圖。把它當成普通網頁字型出貨，意味著訪客要下載好幾 MB 文字才正確顯示，這在手機連線上是不能接受的。
有三種真實的做法：
子集化（Subsetting）。做一個只含該頁面實際用到的字的字型檔。對一個固定的頁面——一個著陸頁、一個書封、一組標題——這效果極好，可以把 10 MB 變成 30 KB。它對任何內容會變的東西都失效，因為一個不在子集裡的字會退回另一個字型，而且看起來明顯不對。
unicode-range 切分。字型被照字元範圍切成許多小檔案，瀏覽器只下載含有該頁面出現之字元的那幾塊。大型 CJK 網頁字型服務就是這樣運作的，而且這是唯一能處理任意內容的做法。它仍然意味著數十個請求和幾百 KB。
系統字型。用讀者裝置上已經有的字型。什麼都不用下載、文字立刻顯示，而排版就是那台裝置有的樣子。對中文內文來說，這往往是誠實的選擇——一個自訂 CJK 字型的效能代價是真的，而在手機上視覺收穫很小。
一個常見的折衷：標題用子集化的自訂字型（字集小而且是已知的），內文用系統字型。
在頁面出現和字型抵達之間，瀏覽器得顯示點什麼，而那兩種可能的行為都有名字：
你用樣式表裡的 font-display 在兩者之間選擇。swap 給你 FOUT，而那是內文的正確預設——「立刻讀得到」勝過「最後才漂亮」。optional 更進一步：只有當字型幾乎立刻抵達時瀏覽器才用它，否則這一次造訪就維持後備字型，完全消除了跳動。
跳動本身可以靠挑一個比例接近真正字型的後備字型來減輕，這樣換字時重排的文字比較少。
傳統字型家族每個字重和樣式各出一個檔案——標準、粗體、斜體、粗斜體、細、半粗。六個檔案，六次下載。
一個可變字型把整個範圍放在一個檔案裡，字重是一條連續的軸。它比任何單一字重大，但比它們全部加起來小得多，所以一旦你需要三個以上字重它就贏了。有些還把寬度、傾斜或光學尺寸當成額外的軸。
這一點有真實的後果，而且被廣泛忽略。
桌面字型授權通常不允許網頁嵌入。你買的那個字型、或者設計軟體附的那個，授權的是「在你機器上製作文件」——不是「被提供給一個網站的每一個訪客」。網頁使用是另一份授權，常常按頁面瀏覽量計價。
把一個桌面 TTF 轉成 WOFF2 然後上傳，技術上微不足道，而在多數情況下是違反授權的。開源字型家族數量龐大，涵蓋大部分需求，包括好幾套不錯的 CJK 家族；那是直截了當的答案。
同樣的區分適用於把字型嵌進一本發行的 EPUB，那同樣是散布而不是個人使用。
PDF 裡的字型問題看起來類似，但成因不同。PDF 把字型嵌在文件裡面，所以它是自足的；當一份 PDF 的字型變了，那是因為它們沒有被嵌入，閱讀器拿別的字型代換了。
網頁字型從來不是嵌在頁面裡——它是一個透過網路抓取的獨立檔案，而且它可能因為 PDF 從不會面對的理由而沒抵達：一個被擋掉的請求、一條慢速連線、一份樣式表指名了一個不存在的檔案。
font-display: swap 立刻顯示讀得到的文字，而不是一片空白