UltKit

TTF 轉 WOFF2 字型轉換

要自行託管字型,就從這裡開始:WOFF2 是目前所有瀏覽器優先下載的格式,也是包裝您手上 TrueType 資料最小的格式。本頁同時會產生載入字型所需的 CSS 規則。

字型轉換器

或將TTF, OTF, WOFF … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    上傳 TTF 檔案

    加入您打算使用的每一種字重與樣式,最多 20 個檔案,每個檔案最大 95 MB。可變字型 TTF 也能處理,並會保留其軸向。

  2. 2

    保留 CSS 選項,能做子集就做

    附上 @font-face CSS 已預設勾選。在進階設定中,如果您的網站使用西方語言,可將保留字元設為 Basic Latin 或 Latin + accents,也可以考慮將微調(Hinting)設為移除。

  3. 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 規則

範例規則;請替換名稱,若未做子集化請移除 unicode-range
@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 支援情況

  1. 2014

    Chrome 36

    Google 的瀏覽器率先預設解碼 WOFF2。

  2. 2015

    Firefox 39

    Mozilla 預設啟用 WOFF2 解碼。

  3. 2016

    Edge 14

    微軟最初的 Edge 隨 Windows 10 週年更新加入 WOFF2。

  4. 2018

    W3C 建議標準

    規格正式定案;此時 macOS 和 iOS 上的 Safari 也已能解碼 WOFF2。

TTF

TrueType 字型

TTF 是 Apple 在 1980 年代末開發、1991 年發布,之後授權給 Microsoft 的 TrueType 字型格式。它以二次曲線定義字形輪廓,並包含讓文字在螢幕上顯示清晰的 hinting 指令。所有桌面作業系統、文書處理軟體和設計應用程式都支援 TrueType。它缺少 OpenType 的一些進階排版功能,也比網頁字型格式大。

壓縮方式
無損
透明度
–
動畫
–
推出年份
1991 · Apple
TTF 轉檔工具

WOFF2

Web Open Font Format 2

WOFF2 是 Web Open Font Format 的第二版,採用 Google 的 Brotli 壓縮,並於 2018 年成為 W3C 建議標準。檔案比 WOFF 約小 30%,有助於加快網頁載入。所有現代瀏覽器都支援 WOFF2,也是網頁字型的建議格式。桌面作業系統與設計軟體無法直接安裝。

壓縮方式
無損
透明度
–
動畫
–
推出年份
2018 · W3C (Google)
WOFF2 轉檔工具

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 版本會忽略它們,改用備用字型。電子郵件的字型堆疊中,務必列出安全的系統字型。