TTF 轉 WOFF2 字型轉換
要自行託管字型,就從這裡開始:WOFF2 是目前所有瀏覽器優先下載的格式,也是包裝您手上 TrueType 資料最小的格式。本頁同時會產生載入字型所需的 CSS 規則。
字型轉換器
或將TTF, OTF, WOFF … 檔案拖曳到這裡 ·
每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除
檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。
移除用不到的文字系統,可將網頁字型從數百 KB 縮小到 30 KB 以下。要安裝在電腦上的字型請保留所有字元。
貼上字型必須涵蓋的文字或字元,例如標誌用字或標題。其餘字元都會移除。
字型微調能讓 Windows 螢幕上的小字更銳利。移除後網頁字型通常可節省 10–30%;自動微調會為沒有微調資訊的字型加上。
留空則保留原名稱。重新命名後,可將轉換後的字型與原字型一起安裝而不衝突。
例如 Regular、Bold、Italic。留空則保留原本的樣式名稱。
使用方式
- 1
上傳 TTF 檔案
加入您打算使用的每一種字重與樣式,最多 20 個檔案,每個檔案最大 95 MB。可變字型 TTF 也能處理,並會保留其軸向。
- 2
保留 CSS 選項,能做子集就做
附上 @font-face CSS 已預設勾選。在進階設定中,如果您的網站使用西方語言,可將保留字元設為 Basic Latin 或 Latin + accents,也可以考慮將微調(Hinting)設為移除。
- 3
轉換為 WOFF2
按下轉換為 WOFF2,並連同 .css 檔案一起下載字型。將兩者上傳到您的網站,再連結該樣式表,或把規則貼到自己的樣式表中。
如何將 TTF 轉換為網站用的 WOFF2?
上傳 .ttf 檔案,保持勾選附上 @font-face CSS,再按下轉換為 WOFF2。您會得到 .woff2 檔案,以及一個含有指向該檔案的 @font-face 規則的 .css 檔案。
為什麼網頁字型應該使用 WOFF2
TTF 是未壓縮的資料表:包含輪廓、度量、字距調整和名稱。WOFF2 於 2018 年成為 W3C 建議標準,保留完全相同的資料表,但先重新整理字形輪廓以提升壓縮效果,再透過 Google 於 2015 年發表的壓縮演算法 Brotli 壓縮。Google 自己的測試發現,WOFF2 平均比舊的 WOFF 格式小約 30%,而且瀏覽器在下載後會還原原始字型資料,因此字形本身不會有任何改變。
字型會阻塞渲染,所以它的大小比 KB 數字看起來更重要。網頁字型載入前,瀏覽器不是隱藏文字就是顯示備用字型,太晚替換還可能造成版面位移。檔案越小,這段時間就越短,這裡有兩個選項能進一步縮短:保留字元會移除您的頁面從不顯示的字形,而將微調(Hinting)設為移除,則會捨棄手機和高像素密度螢幕本來就會忽略的指令。請保留 TTF 原始檔供桌面使用;WOFF2 轉 TTF 日後可以解開網頁字型,但無法還原子集化時已移除的字形。
TTF 與 WOFF2 檔案大小比較
TTF,完整字元集
100%
未壓縮的字型資料表,與桌面安裝的版本相同
WOFF2,Basic Latin 子集
通常為 10–25%
Brotli 壓縮加上較少的字形;依字型而異
WOFF2 字型的 @font-face 規則
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}各版本瀏覽器的 WOFF2 支援情況
2014
Chrome 36
Google 的瀏覽器率先預設解碼 WOFF2。
2015
Firefox 39
Mozilla 預設啟用 WOFF2 解碼。
2016
Edge 14
微軟最初的 Edge 隨 Windows 10 週年更新加入 WOFF2。
2018
W3C 建議標準
規格正式定案;此時 macOS 和 iOS 上的 Safari 也已能解碼 WOFF2。
TTF
TrueType 字型
TTF 是 Apple 在 1980 年代末開發、1991 年發布,之後授權給 Microsoft 的 TrueType 字型格式。它以二次曲線定義字形輪廓,並包含讓文字在螢幕上顯示清晰的 hinting 指令。所有桌面作業系統、文書處理軟體和設計應用程式都支援 TrueType。它缺少 OpenType 的一些進階排版功能,也比網頁字型格式大。
- 壓縮方式
- 無損
- 透明度
- –
- 動畫
- –
- 推出年份
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 是 Web Open Font Format 的第二版,採用 Google 的 Brotli 壓縮,並於 2018 年成為 W3C 建議標準。檔案比 WOFF 約小 30%,有助於加快網頁載入。所有現代瀏覽器都支援 WOFF2,也是網頁字型的建議格式。桌面作業系統與設計軟體無法直接安裝。
- 壓縮方式
- 無損
- 透明度
- –
- 動畫
- –
- 推出年份
- 2018 · W3C (Google)
TTF 轉 WOFF2 會把桌面字型封裝成瀏覽器偏好的 Brotli 壓縮容器,讓相同的字形以更少的位元組送達訪客;反向頁面則供需要安裝網路上找到的字型的人使用。
TTF 轉 WOFF2 常見問題
使用 WOFF2 時,還需要 TTF 或 WOFF 作為備援嗎?
以現在的公開網站來說,通常不需要。Chrome、Edge、Firefox 和 Safari 多年前就已支援 WOFF2,少數不支援的瀏覽器(例如 Internet Explorer 11)很少值得多準備一個檔案。只有當您的流量分析顯示有這類訪客時,才需要把 TTF 轉 WOFF 的輸出加為第二個 src 項目。
為什麼 WOFF2 字型仍超過 100 KB?
壓縮只會縮小字形的儲存方式,不會減少字形的數量。涵蓋拉丁文、西里爾文、希臘文和越南文的字型,會全部一併載入。只保留您實際顯示的文字系統(子集化),才能把文字字型縮小到幾十 KB。
font-display: swap 有什麼作用?
它會讓瀏覽器立即以備用字型顯示文字,等您的網頁字型載入後再替換,而不是在下載期間隱藏文字。請依上方範例將它加入 @font-face 規則;如果在連線較慢時想避免太晚才替換,也可以改用 optional。
可以把 Google Fonts 的 TTF 轉成 WOFF2 自行託管嗎?
可以。Google Fonts 的字型家族採用 SIL Open Font License 或 Apache License 授權,兩者都允許轉換與自行代管。自行代管檔案也能省去向第三方伺服器發出請求。
WOFF2 能用在電子報郵件裡嗎?
只有部分郵件用戶端可以。Apple Mail 和 iOS 郵件會透過 @font-face 載入網頁字型,而 Gmail 和大多數 Outlook 版本會忽略它們,改用備用字型。電子郵件的字型堆疊中,務必列出安全的系統字型。