如何将 .ttf 字体转换为可在 CSS 中使用的网页字体（附压缩方法）

字体 等免费字体。
但当你直接下载 .ttf 字体并用在网页时，往往会遇到以下问题：

• 文件太大：一个 .ttf 文件可能高达 15MB～60MB，严重拖慢页面加载速度；

• 浏览器兼容性差：不是所有浏览器都完美支持 .ttf；

• 不知道怎么写 @font-face；

本文将手把手教你如何把 .ttf 转换为 CSS 可识别的 .woff2 格式，并通过子集压缩让字体文件仅为几十 KB！

🧾 字体准备

你可以在以下网站免费下载你需要的字体：

✅ 推荐下载地址：

• 字体天下（提供各类字体的免费下载和在线预览服务）：
  👉 字体天下-提供各类字体的免费下载和在线预览服务

• 思源黑体（Source Han Sans）GitHub 地址：
  👉 https://github.com/adobe-fonts/source-han-sans

🧰 在线工具推荐：Transfonter（支持压缩、子集裁剪）

Transfonter 是一个免费的字体转换工具，支持 .ttf → .woff/.woff2，并自动生成 @font-face。

📍 地址：
👉 Online @font-face generator — Transfonter

✅ 转换步骤（含压缩）

第一步：上传 .ttf 文件

1. 打开 Transfonter 网站；

2. 点击 「+ Add fonts」 上传你要转换的 .ttf 文件；

3. 上传成功后，字体名会出现在列表中。

第二步：设置输出格式

• 勾选：WOFF 和 WOFF2 ✅

• Font display：选择 swap（提升页面加载体验）

• 不勾选 EOT（已过时）

第三步：设置字符子集（压缩关键）

点击顶部的 “Subset” 选项卡（⚠️ 重点）：

• 可以勾选：

  • Basic Latin（英文和数字）

  • Chinese (Simplified)（简体中文）

或者使用 「Custom text」，只保留你网页用到的文字，比如：

首页 关于我们 产品服务 登录 注册 立即购买

👉 这样可以将字体压缩到只有几 KB！

第四步：点击 Convert 转换

转换完成后会自动下载一个 .zip 文件，解压后包含：

• .woff 和 .woff2 文件（已压缩）

• stylesheet.css（内含 @font-face）

✅ 如何在 CSS 中使用生成的字体

假设你把字体文件放在 /fonts/ 目录中，可这样使用：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'MyFont', sans-serif;
}