速查在线工具箱字体格式速查（TTF / OTF / WOFF2）
TTF 和 OTF 差在轮廓算法、WOFF2 为什么能小一半、网页该用哪种格式，以及可变字体是怎么做到一个文件顶多个字重的。
字体文件的格式之争，本质上围绕两件事：轮廓怎么描述、体积怎么压缩。TTF 与 OTF 的分歧在前者（轮廓算法不同），WOFF 与 WOFF2 的分歧在后者（压缩方式不同）。
对做网页的人来说，结论其实很简短：设计交付常用 TTF / OTF，网页加载用 WOFF2 并保留 WOFF 兜底。但知道为什么，能避免在遇到加载失败、字重不对、体积过大时无从下手。
1常见格式对照
先区分「桌面字体」与「网页字体」两类用途，再看各自的格式特点。
| 格式 | 全称 / 说明 | 主要用途 | 备注 |
|---|---|---|---|
TTF | TrueType Font | 桌面安装、设计软件 | 轮廓用二次贝塞尔曲线描述 |
OTF | OpenType Font | 设计与专业排版 | 通常为 CFF 轮廓（三次贝塞尔曲线），也支持大量高级排版特性 |
WOFF | Web Open Font Format | 网页加载 | 把 TTF / OTF 用 zlib 压缩后加一层封装，浏览器直接支持 |
WOFF2 | WOFF 第二代 | 网页加载（首选） | 改用 Brotli 压缩，体积通常比 WOFF 再小约三成 |
EOT | Embedded OpenType | 早期 IE | 已被淘汰，新项目不必再提供 |
SVG 字体 | 矢量字体 | 历史方案 | 已废弃，现代浏览器不再支持 |
| 可变字体 | Variable Font | 统一多字重 / 多宽度 | 一个文件内含多个设计轴，按需插值，见下一节 |
OTF 与 TTF 在效果上并没有「谁更高级」之分，主要差别是轮廓算法与文件体积。实际选字体时更值得关注的是「授权范围」——很多商业字体不允许用于网页嵌入，这是比技术格式更需要先确认的一点。
2网页字体的加载与格式顺序
浏览器会按声明顺序选择它支持的第一种格式，所以「新格式在前、旧格式在后」是正确写法。
| 写法 | 作用 | 建议 |
|---|---|---|
format("woff2") | 声明该资源是 WOFF2 | 放在第一位，覆盖绝大多数现代浏览器 |
format("woff") | 声明该资源是 WOFF | 第二位，作为兜底 |
format("truetype") | 声明为 TTF | 仅在需要兼容很老的浏览器时提供 |
font-display: swap | 先用系统字体渲染，字体加载完成后替换 | 避免文字长时间不可见，是最常用的策略 |
font-display: optional | 字体加载慢就直接用系统字体 | 对性能最友好，但可能整次访问都看不到自定义字体 |
| 预加载 | 在文档头部提前请求关键字体 | 仅对首屏必需的字体使用，避免抢占带宽 |
`font-display: block` 会让文字在字体加载完成前不可见，最长可能白屏数秒。除非字体对品牌至关重要且体积很小，否则不建议使用。
3子集化：中文网页字体能不能用
中文字体动辄几 MB 到十几 MB，直接嵌入网页几乎不可接受。子集化是唯一可行的路径。
- 什么是子集化
- 把字体文件里没用到的字形删掉，只保留页面实际需要的字符。一个只含几百个字的子集通常只有几十 KB
- 彻底子集化
- 只保留页面用到的字。体积最小，但页面内容一变就要重新生成
- 按字符范围拆分
- 把常用字、次常用字分别切成多个文件，配合
unicode-range按需加载。这是大型站点的常见做法 - 典型体积参考
- 完整中文黑体可能十几 MB；按常用字子集化后可降到几百 KB 甚至更低；只含标题十来个字的子集可能只有几 KB
- 注意事项
- 子集化后如果文本超范围会出现「缺字」，通常表现为回退到系统字体，同一行文字出现两种字体
- 授权仍然适用
- 子集化不改变字体的授权限制。若原始授权不允许网页嵌入，子集化后依然不允许
4可变字体：一个文件覆盖多个字重
传统做法是每个字重（细、常规、中、粗）各一个文件，可变字体把它们合而为一，并在数值区间内连续可调。
| 对比项 | 传统多文件 | 可变字体 |
|---|---|---|
| 文件数量 | 每个字重一个文件 | 通常一个文件 |
| 字重取值 | 离散（400、700 等） | 区间内连续（如 100 到 900 任意值） |
| 总体积 | 多字重叠加，体积累计 | 介于单字重与多字重文件之间，通常明显更省 |
| CSS 写法 | 每个字重单独声明 font-weight | 一次声明 font-weight: 100 900 的范围 |
| 风险 | 文件多、请求多 | 单文件较大，首屏若只需要一个字重反而不划算；且需要较新的浏览器支持 |
| 常见设计轴 | — | 字重 wght、宽度 wdth、倾斜 slnt、光学尺寸 opsz |
可变字体并非总是更优：如果页面只用到两个字重，且两者都被稳定使用，两个独立子集文件可能比一个完整的可变字体更小。判断依据是「实际用到的字重数量」与「是否需要连续取值」。
5四类常见故障与成因
- 字体没生效
- 多半是没有真正加载：路径错误、跨域限制（字体通常受同源策略约束，跨域需服务端返回允许头）、或格式声明与实际文件不匹配
- 文字先是系统字体再跳变
- 这是
font-display: swap的正常行为。若不希望跳变，可改用font-display: optional，代价是可能整次访问都看不到自定义字体 - 部分文字显示成另一种字体
- 典型的子集缺字：该字符不在子集范围内，浏览器回退到系统字体。解决方式是扩大子集范围或按字符范围拆分
- 字重看起来不对
- 可能是字体本身没有该字重，浏览器用算法「合成」了假粗体（表现为字形变形、笔画发虚）。应确认字体文件包含目标字重，或改用可变字体
- 控制台报字体解析失败
- 常见于文件损坏、协议或压缩传输环节出错、以及把 WOFF2 声明成了 WOFF。核对格式声明与实际文件即可
看完就能用的站内工具
全部工具总览 →关于「字体格式速查（TTF / OTF / WOFF2）」的常见问题
TTF 和 OTF 有什么区别？
主要差别在轮廓描述方式：TTF 使用二次贝塞尔曲线，OTF 通常使用 CFF（三次贝塞尔曲线）轮廓。这个差异影响了渲染细节与文件体积，但对普通使用者来说观感差别很小。OTF 的另一个优势是更完整地支持 OpenType 高级排版特性（如连字、小型大写字母、多种数字形式），所以在专业排版与设计场景更常见；TTF 则在系统安装与日常使用中更普遍。选字体时比格式更需要先确认的是授权范围，尤其是能否用于网页嵌入。
网页字体该用哪种格式？
首选 WOFF2，并保留 WOFF 作为兜底，按「WOFF2 在前、WOFF 在后」的顺序声明，浏览器会自动选择它支持的第一种。WOFF2 使用 Brotli 压缩，体积通常比 WOFF 再小约三成，而现代浏览器已全面支持。EOT 是早期 IE 的方案，SVG 字体已被废弃，新项目都不必再提供。另外别忘了设置 font-display：常用的是 swap（先用系统字体渲染，加载完成后替换），能避免文字长时间不可见。
中文网页字体为什么很少见？
因为体积。一套完整的中文字体通常在数 MB 到十几 MB，直接嵌入网页会让加载时间显著变长，尤其在移动网络上不可接受。可行的做法是子集化——只保留页面实际用到的字形。彻底子集化后一个页面可能只需几十 KB；大型站点通常按字符范围拆成多个文件，配合 unicode-range 按需加载。需要注意的是，子集化后若文本超出范围会出现缺字，表现为部分文字回退成系统字体，同一行出现两种字形。
可变字体是什么，值得用吗？
可变字体把多个字重、宽度等风格合并进一个文件，并通过设计轴在这些风格之间连续插值，因此可以用一个文件覆盖从细到粗的全部字重，还能取到 400、450、537 这类非整数值。CSS 里只需声明一次字体并把 font-weight 写成一个区间。是否值得用取决于用途：如果页面需要连续的字重取值或用到三个以上字重，它通常能显著减少请求数与总体积；如果只用一两个固定字重，两个独立子集文件反而可能更小。另外它对浏览器版本有一定要求。
继续查：相关内容
全部速查 →内容说明：本页速查数据由本站自行整理，事实性内容以对应官方规范与文档为准，未复制第三方速查表或百科的表述。数据最后核对日期：2026-10-05。若发现错误或已更新的标准，欢迎通过页脚反馈入口告知。