網頁字型生成器

關於網頁字型生成器

網頁字型生成器幫你省掉自己部署字型時最瑣碎的活。上傳 TTF 或 OTF，得到一個 ZIP：裡面有 WOFF2、WOFF、TTF 三種格式的字型，還有一個已經寫好 @font-face 規則的 CSS 檔案。把檔案傳到網站上，CSS 粘進樣式表，字型就能用了。

font-display 可以選：推薦的 swap 先用備用字型顯示文字，載入完再換上；其餘四個值對這段等待的處理各不相同。勾選“把字型嵌入 CSS（Base64）”，字型資料會直接寫進 CSS，少一次請求，但樣式表會變大。

網頁字型生成器怎麼用

1. 1
   上傳字型

   上傳要用在網站上的 TTF 或 OTF 字型。

2. 2
   選載入方式

   在 font-display 裡選一個值，大多數網站用推薦的 swap。

3. 3
   是否嵌入 CSS

   想要一個自帶字型的 CSS 檔案，就勾選“把字型嵌入 CSS（Base64）”。

4. 4
   生成字型包

   勾選授權確認，點“網頁字型生成器”按鈕，下載 ZIP。

為什麼用熊仔工匠

• 三種格式一次給

  WOFF2、WOFF、TTF 打包在同一個 ZIP 裡。

• 寫好的 CSS

  CSS 裡的 @font-face 規則已經寫好，路徑也指向字型檔案，複製貼上即可。

• 載入方式可選

  swap、auto、block、fallback、optional 五種。

• 可嵌入 Base64

  字型直接寫進 CSS，適合小字型或圖示字型。