建立網頁字型套件
選取 TTF、OTF、WOFF 或 WOFF2 字型，以建立 WOFF2 檔案、CSS 和 HTML 預覽。整合至網站前，請檢查範例文字、CSS 名稱、字重、樣式和載入期間的顯示方式，然後將套件儲存為 ZIP。不會建立字元子集。
可執行的操作
為網頁打包檔案
使用 TTF、OTF、WOFF 或 WOFF2 建立 WOFF2、CSS 和 HTML 預覽。您可以一次選取多個字型。
檢查字形和 CSS 設定
檢查轉換後字型的外觀。您可以視需要變更網頁使用的名稱、字重和樣式，以及載入期間的顯示方式。
以 ZIP 分享整組檔案
將 fonts 資料夾、fonts.css 和 preview.html 一起儲存。使用時請保留其相對位置。
使用方式
一併選取字型
選取可用於網頁的字型。若要使用多個字型，請一併選取。
檢查外觀和網頁設定
輸入文字以預覽並檢查各字型。若要調整名稱、字重或其他選項，請開啟該字型的 CSS 設定。
建立套件並儲存 ZIP
按下「建立網頁字型套件」，並儲存產生的 webfont-kit.zip。
解壓縮並新增至網頁
解壓縮檔案，並保留 fonts 資料夾、fonts.css 和 preview.html 的位置。於要使用字型的頁面載入 CSS，並使用指定的字型名稱。
適用情境
準備網站發布
將字型打包為網頁格式並附上 CSS，準備整合所需檔案。
將完整套件交付製作團隊
打包多種字型，例如一般和粗體，並附上含有範例文字的 HTML 交付。
字型與 CSS 的搭配方式
WOFF2 是網頁用字型格式
準備包含原始字元的 WOFF2。不會建立字元子集。檔案大小依字型而異。
在 CSS 中登錄名稱、字重和樣式
這些設定會決定網頁使用此字型來呈現哪些要求的樣式，不會將字型字形修改為粗體或斜體。
依字重和樣式區分相同名稱
一般和粗體樣式可以使用相同名稱，但名稱、字重和樣式的組合不得重複。
選擇載入期間的顯示方式
預設會先顯示替代字型，待字型就緒後再切換。您可以視需要在 CSS 設定中變更等待和切換方式。
保留檔案相對位置
fonts.css 會參照 fonts/font-1.woff2 等檔案。如果移動資料夾或 CSS，請相應調整參照路徑。
常見問題
產生的檔案應放在哪裡？
解壓縮 ZIP，並放置 fonts 資料夾、fonts.css 和 preview.html，保留彼此的相對位置。在頁面中載入 fonts.css，並在 CSS 中使用指定的字型名稱。
這和單純轉換格式有何不同？
此畫面會將 WOFF2、CSS 和 HTML 預覽打包在一起。若只想變更字型格式，請使用「字型格式轉換器」。
可以只保留我使用的字元嗎？
此畫面不會建立字元子集，而是準備保留原始字元的字型。
變更字重會讓字元變粗嗎？
此設定會指定 CSS 使用的字重值，不會修改字型檔中的字形。若要使用粗體或斜體，請提供含有該字形的檔案。
可以使用多個相同字型名稱的檔案嗎？
可以登錄不同字重或樣式的檔案。若名稱、字重和樣式的組合重複，請檢查相關設定。
再次選取字型時會發生什麼事？
目前的字型組合和產生的 ZIP 會移除，並載入新選取的組合。若要繼續與新檔案一起使用某些檔案，請再次選取它們。
如果部分範例字元沒有顯示，該怎麼辦？
字型未包含的字元可能會以其他字型顯示。請檢查支援的字元，以及字型在預定使用環境中的顯示效果。
如果字型無法載入，該怎麼辦？
請重新選取支援格式的字型。如果組合中的任何檔案無法轉換或載入，就不會儲存部分成功的組合。
輸入與結果
- 輸入
- TTF、OTF、WOFF 和 WOFF2。您可以一次選取多個檔案。
- 條件
- 請查看輸入字型的使用條款，包括網頁嵌入限制。
- 設定
- CSS 使用的名稱、字重、樣式和載入顯示方式。
- 輸出
- webfont-kit.zip。包含 WOFF2、fonts.css 和 preview.html。