如何把字体转为 Base64
- 把
.woff2、.woff、.ttf或.otf文件拖到框中，或用文件选择器选择。 - 输出为 已设为 CSS @font-face。如果你要自己编写规则，请选择 Data URI 或 纯 Base64。
- 按 复制输出，粘贴到样式表中。
对于名为 Inter-Bold.woff2 的文件，结果如下（数据已缩短）：
@font-face {
font-family: "Inter-Bold";
src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
font-display: swap;
}
font-family 名称取自文件名：去掉扩展名，并把字母、数字、空格、- 和 _ 以外的字符替换为空格。请把它改成 CSS 中使用的字体族名称；如果嵌入同一字体族的多种样式，还要加上 font-weight 和 font-style。
format() 提示和 MIME 类型
| 文件 | MIME 类型 | format() | Base64 开头 |
|---|---|---|---|
| WOFF2 | font/woff2 | woff2 | d09GMg |
| WOFF | font/woff | woff | d09GRg |
| TrueType | font/ttf | truetype | AAEAAA |
| OpenType（CFF） | font/otf | opentype | T1RUTw |
format() 提示让浏览器无需下载就能跳过自己用不了的字体源。只有一个嵌入源时，它的作用较小，但浏览器不认识的提示仍会让它跳过该源。工具根据浏览器报告的 MIME 类型推断提示，而有些系统给字体报告的类型并不常见。如果 OTF 得到的是 format("truetype")，请改为 opentype。
封装 TrueType 字体的 WOFF2 以 d09GMgABAAA 开头；封装 CFF 轮廓的则以 d09GMk9UVE8 开头。
让嵌入的字体保持小巧
Base64 比字体文件大三分之一，而且位于阻塞渲染的 CSS 中。用一个 77,160 字节的 WOFF2 图标字体测试，得到 102,880 个字符的 Base64，页面上任何内容绘制之前都必须先下载完这些字符。
想让内联物有所值：
- 使用 WOFF2。同一款字体，它比 TTF 或 OTF 小得多。
- 对字体做子集化。去掉用不到的字形，例如只保留拉丁字母、删除其他所有文字，可以让大字体缩小一大半。字体子集化工具可以在命令行中完成这项工作。
- 只内联一种字形样式。首屏用到的标题字体或图标字体是合适的选择。四种字重的正文字体更适合作为单独的文件，让浏览器缓存。
必须自带字体的独立 HTML 文档，以及 canvas 或 SVG 导出文件，是嵌入字体最典型的合理场景。
检查 Base64 字体
如果文字回退到了默认字体，请打开浏览器的开发者工具查找字体加载错误，然后确认 data URI 以 data:font/ 开头，载荷以上表中的某个前缀开头。以 PCFET0NUWVBF 开头的文件，其实是一个用字体扩展名保存的 HTML 页面。Base64 转字体 可以解码字符串、预览字形并保存文件。
常见问题
应该把哪种字体格式嵌入为 Base64？
WOFF2。它是专门为字体设计的压缩格式，所有现行浏览器都支持，所以同一款字体，它的 Base64 比 TTF 或 OTF 短得多。只有当目标工具无法读取 WOFF2 时，才嵌入 TTF。
每种字体类型对应什么 format() 值？
WOFF2 用 woff2，WOFF 用 woff，TTF 用 truetype，OTF 用 opentype。工具根据文件的 MIME 类型选择提示，类型未知时回退为 truetype，所以 OTF 和 WOFF 文件请检查一下提示。
把字体嵌入为 Base64 合法吗？
这取决于字体的许可证。SIL Open Font License 等开放许可证允许这样做。有些商业 Web 字体许可证限制自行托管或嵌入，内联付费字体之前请先查看条款。
嵌入字体会拖慢页面吗？
浏览器不再单独请求字体，但样式表变大了，必须完整下载后页面才能渲染。对一个经过子集化的小字体来说这是划算的；整个字体家族最好还是保留为单独的文件。