TTF vs WOFF2: 網頁字型格式比較

網頁排版是形成用戶體驗和品牌識別的重要因素。
在創建 Django 或靜態網頁項目時，我們常會接觸到 .ttf 和 .woff2 等各種字型格式。

本文將介紹 .ttf 和 .woff2 的差異，為何網頁開發者會偏好使用 .woff2，
以及在 Ubuntu 中如何將 .ttf 轉換為 .woff2。
還將提供一個可以自動化轉換的 Bash 腳本。

1. TTF是什麼？

TTF (TrueType Font) 是 Apple 和 Microsoft 共同開發的通用字型格式。
它支持印刷和顯示，並在各種操作系統中被廣泛使用。

• ✅ 優點：
• 在所有操作系統中得到廣泛支持

• 適合用於圖像渲染或桌面應用程式

• ❌ 缺點（網頁標準）：

• 文件容量較大
• 未進行網頁優化
• 加載速度較慢

2. WOFF2是什麼？

WOFF2 (Web Open Font Format 2) 是專為網頁設計的最新壓縮字型格式。

• ✅ 優點：
• 非常高的壓縮率 (相對於 TTF 小最多 30%)
• 快速加載，網路優化

• 完全支持所有最新瀏覽器

• ❌ 缺點：

• 不適合桌面應用程式或某些圖像渲染
• 需要從 .ttf 或 .otf 進行單獨轉換

3. 為什麼網頁開發者應該使用WOFF2？

考慮到網頁性能和用戶體驗，若無特殊理由，始終建議使用WOFF2。

4. 在Ubuntu中進行TTF → WOFF2轉換

安裝所需套件

sudo apt update
sudo apt install woff2

安裝後，可以使用 woff2_compress 命令進行轉換。

手動轉換命令

woff2_compress Poppins-Regular.ttf

在同一目錄中將生成 Poppins-Regular.woff2 文件。

5. 額外：自動轉換 Bash 腳本

使用以下腳本可以一次性轉換 .ttf 文件。對 Bash 腳本熟悉的人可以直接複製使用。

convert-ttf-to-woff2.sh

#!/bin/bash

# 轉換目標目錄
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"

# 檢查 woff2_compress 命令
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 找不到 'woff2_compress' 命令。"
    echo "請使用以下命令安裝："
    echo "    sudo apt install woff2"
    exit 1
fi

# 創建結果目錄
mkdir -p "$OUTPUT_DIR"
echo "📁 轉換結果目錄：$OUTPUT_DIR"

# 開始轉換
echo "🔄 正在進行 TTF → WOFF2 轉換..."

find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
    filename=$(basename "$ttf_file")
    base="${filename%.ttf}"
    output_file="$OUTPUT_DIR/$base.woff2"

    if [[ -f "$output_file" ]]; then
        echo "⚠️  已存在：$output_file (跳過)"
        continue
    fi

    woff2_compress "$ttf_file"
    mv "${ttf_file}.woff2" "$output_file"
    echo "✅ 轉換完成：$output_file"
done

echo "🎉 所有轉換已完成！"

✅ 總結

• .woff2 是專門為網頁設計的最新格式，在性能和容量上表現出色。
• .ttf 在網頁中效率較低，但在圖像渲染等其他用途上仍然有其用處。
• 利用自動轉換腳本，可以更有效地管理項目的字型。

希望這對你的網頁項目的字型性能提升有所幫助！