北京
一個自托管的字體家族，還沒等瀏覽器渲染出用戶看到的第一行標題，可能就已經悄悄加上了幾百KB的下載負擔。這筆賬最終會算在首次內容繪制和最大內容繪制的性能成績上——尤其當最大內容繪制元素恰好是你精心挑選的那個定制字體標題。
字體子集化就是那個最務實的解決方案：每個頁面、每個組件需要哪些字符，就只發送哪些字符對應的字形數據。那些針對全世界各種語言和符號設計的完整字體文件，你永遠不會用到的部分，從一開始就不該出現在用戶的網絡請求里。
到底什么是字體子集化？一個典型的桌面端字體文件往往包含了上千個字形：拉丁擴展部分、西里爾字母、連字、各種數字、標點符號，以及那些在營銷網站上根本不會出現的符號。當你在樣式表里用@font-face引入這個文件，或者從內容分發網絡拉取它的時候，除非你主動拆開，否則瀏覽器就要下載并解析整個字體包。子集化的做法，就是重新生成一個更小的字體文件，讓它只包含一組預先定義好的Unicode碼點。舉個例子：某個只在主標題上使用的展示字體，可能只需要不到40個字符就夠了。一個純拉丁文的博客正文字體，不需要在每篇文章里都拖著中日韓字庫跑。英文的界面標簽，完全可以把用不到的粗細和文字系統統統砍掉。瀏覽器需要下載的數據變少了，解碼時間也縮短了，這個字體就能更快地被應用到頁面上。該有的視覺風格還在，扔掉的是那些多余的負擔。
子集化在哪些場景下能最快地改善網頁字體性能和最大內容繪制？當你已經在正文里使用系統字體棧，并且只加載一個采用了現代壓縮技術的小型可變字體時，它帶來的提升可能沒那么明顯。但還是要實際測量看看，畢竟在磁盤上看起來“小”的文件，在慢速移動網絡下未必真的小。把子集化策略和加載控制手段搭配起來使用：設置字體顯示策略為swap或者optional，只預加載會阻塞首屏渲染的那個字體文件，別因為品牌規范手冊上列了六種字重，就在全站范圍內把它們全部加載進來。我們聊過圖片優化策略如何改善最大內容繪制，字體就是很多首屏模板里剩下的另一半拼圖。
用一個實際案例來看效果：假設有個活動落地頁，主標題用了一款辨識度很高的展示字體，上面寫著“夏日大促周日截止”。這個商用字體的完整文件，每個字重可能有180KB的WOFF2格式大小。這段文案實際上用到的內容，無非就是字母、空格和幾個基本的標點符號，加起來大概28個字形。如果你只把這28個字形提取出來，再額外加入0到9這十個數字和百分號、短橫線這樣便于內容運營修改的備用字符，最終生成的子集文件可能連15KB都不到。標題在視覺效果上沒有任何變化，但對于用戶的首次訪問來說，網絡傳輸和字體加載器的工作量都大幅減少了。一個常用的做法是，始終保留比當前文案稍微寬泛一點的字符子集，讓編輯人員不需要重新部署就能修改內容。比較穩妥的模式是“網站上實際出現過的所有字符”再加上一個包含常用數字和標點的安全緩沖區，或者為每種語言區域準備獨立的子集文件。
不需要手動編輯二進制字體表，下面這四個工具覆蓋了日常工作中最常見的字體子集化流程。Google Fonts托管了大量字體系列，并且自帶了前端優化所需的各種參數支持。具體來說，當你通過它的接口請求某個字體時，可以直接在地址后面加上text參數，值就填你頁面上實際要用到的那些字符。服務端會根據這個字符串，動態生成一個只包含對應字形的子集文件，并且保留所有標準的壓縮和緩存策略。這幾乎是零配置實現動態字體子集化的最直接方式，尤其適合那些文案內容相對固定、變動不頻繁的頁面場景。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
