@font-face 網頁字型生成器
變數字型、WOFF2 和 CSS 一鍵完成
將您的 TTF、OTF、WOFF 或 WOFF2 檔案（包括變數字型）拖放到這裡，選擇您的設置，然後下載一個可供托管的 WOFF2、WOFF、完整的 stylesheet.css 和一個實時演示頁面。
將字型拖放到這裡或點擊瀏覽
TTF、OTF、WOFF、WOFF2 和變數字型 — 允許多個檔案
選擇的字型
轉換設置
這是您在 CSS 中使用的名稱，例如 font-family: 'MyName';。留空以保留每個字型的原始系列名稱。
控制在網頁字型加載時文本的顯示方式。
在生成的樣式表中的 url(...) 中使用的路徑。
提示：按 Ctrl+Enter 生成。
您的網頁字型包已準備好
ZIP 包含：轉換的字型、stylesheet.css 和一個實時 demo.html。
100% 客戶端
轉換完全在您的瀏覽器中運行，使用 WebAssembly。您的字型永遠不會上傳。
變數字型和所有格式
TTF、OTF、WOFF 和 WOFF2 進入 — 優化的 WOFF2 出來，完全支持變數字型軸（wght、wdth、slnt、ital）。
生產就緒的輸出
提供一個 stylesheet.css，具有正確的字型顯示、可選的 local() 和 demo.html，讓您可以將包直接放入您的項目中。
什麼是網頁字型生成器？
網頁字型生成器將桌面或下載的字型檔案（TTF、OTF、WOFF、WOFF2 — 包括現代變數字型）轉換為瀏覽器可以通過網絡加載的格式 — 主要是今天的 WOFF2，WOFF 作為舊版回退 — 並生成匹配的 CSS @font-face 聲明，讓您可以自我托管網站的排版。
為什麼要自我托管字型？
自我托管讓您完全控制性能、隱私和可靠性。沒有對 Google Fonts 的第三方請求（對 GDPR 有幫助），沒有額外的 DNS 查詢，您可以預加載檔案，並且您可以精確決定哪些字重、樣式和軸與您的網站一起發送。
轉換是如何工作的
WOFF2 將您的 TTF/OTF 輪廓包裝在專為網絡設計的 Brotli 壓縮容器中 — 通常比 WOFF 小 30% 且比原始 TTF 小 50%以上。WOFF 是一個較舊的 zlib 壓縮包裝器，保留作為非常舊瀏覽器的回退。我們的生成器運行 Google 的官方 WOFF2 編碼器和解碼器，編譯為 WebAssembly，因此轉換在您的瀏覽器內部本地進行。將從 Google Fonts 下載的 WOFF2 拖入，我們會透明地將其解碼回 sfnt 容器，然後重新編碼 — 您永遠不必尋找原始 TTF。
您在包中獲得的內容
- 每個上傳的字型以 WOFF2（可選 WOFF/TTF）格式提供 — 包括作為單一小檔案的變數字型。
- 一個完整的 stylesheet.css，每個檔案都有一個 @font-face 規則，正確的 format() 提示、字重範圍、字型樣式、字型拉伸、字型顯示和可選的 local()。
- 一個 demo.html 頁面，讓您可以在上線之前預覽每個字重、樣式和軸的多個大小。
- 可選的 Base64 嵌入，將字型內嵌在您的 CSS 中，以便於離線優先或單檔案場景。
隱私與許可
檔案永遠不會離開您的設備 — 一切都在您的瀏覽器中處理。發布到您的網站之前，請始終確保字型的許可允許網頁字型嵌入。