1. OTF 是什麼？

OTF (OpenType Font) 是由 Adobe 和 Microsoft 共同開發的字體格式，
.ttf（TrueType 字體）的功能得到擴展並包含高級排版功能。

  • ✅ 各種字體功能（連字、替代字元等）
  • ✅ 支援 Unicode
  • ✅ 比 .ttf 更具通用性（特別是在專業設計工具中更受歡迎）

在 Ubuntu 中，OTF 通常被廣泛用作系統或 PDF 渲染字體。

2. 查看 Ubuntu 中安裝的 OTF 字體

可以在終端中使用以下命令確認：

fc-list | grep "\.otf"

您也可以使用特定字體名稱進行過濾：

fc-list | grep "Nimbus Sans" | grep "\.otf"

3. 想在網頁上使用系統字體時

在網頁上無法直接使用安裝在系統中的字體。
因為訪問網站的客戶端計算機可能沒有該字體。

→ 因此，字體必須由網絡服務器提供，最有效的格式是 .woff2。

4. OTF → WOFF2 轉換是關鍵！

OTF to WOFF2 font conversion illustration

📦 安裝轉換工具

sudo apt install woff2

🔄 轉換命令

woff2_compress YourFont.otf

→ 結果：YourFont.woff2

自動轉換腳本

#!/bin/bash
export LC_ALL=C
# [1] 目標字體名稱
read -p "輸入要轉換為 woff2 的字體：" FONT_NAME

# [2] 設置結果保存路徑
DEST_DIR="$HOME/fonts/$(echo $FONT_NAME | tr ' ' '_' | tr '[:upper:]' '[:lower:]')/woff2"

# [3] 確認轉換工具
if ! command -v woff2_compress &> /dev/null; then
    echo "❌ 找不到 'woff2_compress' 命令。請安裝後使用："
    echo "    sudo apt install woff2"
    exit 1
fi

# [4] 創建結果資料夾
mkdir -p "$DEST_DIR"

# [5] 從系統字體列表中提取所有 .otf 並且包含 FONT_NAME 的路徑
echo "🔍 正在搜索 '$FONT_NAME' 的 .otf 字體..."
font_paths=$(fc-list | grep "$FONT_NAME" | grep "\\.otf" | cut -d: -f1 | sort | uniq)

if [ -z "$font_paths" ]; then
    echo "❌ 找不到與 '$FONT_NAME' 相關的 .otf 字體。"
    exit 1
fi

# [6] 執行轉換循環
for font_file in $font_paths; do
    base_name=$(basename "$font_file" .otf)
    output_file="$DEST_DIR/${base_name}.woff2"

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

    echo "🔄 正在轉換：$base_name.otf → $base_name.woff2"

    if ! cp "$font_file" "/tmp/${base_name}.otf"; then
        echo "❌ 複製失敗：$font_file → 跳過"
        continue
    fi

    woff2_compress "/tmp/${base_name}.otf"
    mv "/tmp/${base_name}.woff2" "$output_file"
    rm "/tmp/${base_name}.otf"
    echo "✅ 保存到：$output_file"
done

echo "🎉 所有轉換完成！保存位置：$DEST_DIR"

有需要的朋友們可以試用我寫的上面這個腳本，非常好用。

5. 如何在網頁上使用轉換後的 woff2 文件

將其放入網頁項目的 static/fonts/ 目錄中，然後在 CSS 中聲明：

@font-face {
  font-family: 'Your Custom Font';
  src: url('/static/fonts/YourFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

現在可以在 HTML 中這樣使用：

<body style="font-family: 'Your Custom Font', sans-serif;">
  您好！這是自定義字體。
</body>

6. 總結

項目 要點
.otf 字體 在 Ubuntu 系統中大量安裝
在網頁上使用 由於客戶端 PC 上沒有，因此需要轉換為 .woff2
優化方法 通過 woff2_compress 轉換後在 static 中提供
結果 快速的字體加載，可以反映專用字體設計

對於希望更緊密連接 Ubuntu 系統與網絡服務的開發者來說，
otf → woff2 的轉換是一個值得掌握的重要工具。💪