只載入這一頁用到的字,中文網頁也能快速開啟

貼上一行 script,TwinType 會掃出頁面實際出現的字元,回傳僅含這些字的 woff2 子集。 字型仍是設計師原本的字型,載入量卻只有幾 KB。

示意圖:從整套字型中取出頁面用到的字

為了一行標題,就讓訪客下載整套字型?

一套繁體中文字型收錄上萬個字,一個頁面通常只用到其中幾百個。整包送到瀏覽器,首屏就卡在字型檔上,在手機上尤其明顯。

示意圖:掃描頁面用到的字元

精準子集,只傳用到的字

頁面載入時先掃描實際出現的字元,子集化為 woff2 後才送出。字型檔收錄上萬字,瀏覽器拿到的只有這一頁的那幾百字。

查看 Subset API arrow_forward
示意圖:CDN 快取一年

快取一年,同樣的字不重做

子集完成後放上 CDN,快取效期一年。相同的文字組合再次被請求時直接命中快取,無須重新運算。

查看快取行為 arrow_forward
示意圖:內容更新後自動補字

持續監看,內容更新自動補字

嵌入腳本會持續監看頁面變化。搜尋結果、彈出視窗、SPA 換頁等載入後才出現的文字,都會自動補上缺少的字。

查看 JS API arrow_forward

三步驟快速啟用,免煩惱維護問題

一、建立專案,取得 Token

填入專案名稱與使用網域,系統配發專屬 Token,且僅在你綁定的網域上有效。

二、將嵌入碼放進 <head>

複製後台提供的一行 script 即可。CSS 維持原本寫法,font-family 直接寫字體名稱。

三、其餘交由腳本處理

掃描、子集化與快取全程自動執行。若需指定監看範圍或避免字型替換的閃動,調整一個設定值即可。

四季遞嬗,日月更迭,唯有筆墨如石堅。

這行字為 GenSekiGothic2TW,由嵌入腳本子集化後載入,你現在看到的就是它的實際效果。

建立第一個專案