TTF vs WOFF2: 网站字体格式比较

网络排版是形成用户体验和品牌身份的重要因素。
在创建 Django 或静态网站项目时，会接触到 .ttf 和 .woff2 等多种字体格式。

本文将介绍 .ttf 和 .woff2 的区别，为什么网页开发者更偏爱 .woff2，
以及如何在 Ubuntu 上将 .ttf 转换为 .woff2。
同时，我们还提供了可以自动化转换过程的 Bash 脚本。

1. 什么是 TTF？

TTF (TrueType Font) 是 Apple 和 Microsoft 共同开发的通用字体格式。
它支持打印和屏幕输出，并在各种操作系统中广泛使用。

• ✅ 优点：
• 在所有操作系统中得到广泛支持

• 适用于图像渲染或桌面应用

• ❌ 缺点（Web标准）：

• 文件体积大
• 未进行网页优化
• 加载速度慢

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 在网络中效率较低，但在图像渲染等其他用途上有其价值。
• 利用自动转换脚本可以更高效地管理项目中的字体。

希望能帮助您提升网页项目的字体性能!