字体转 Base64 转换器
将字体文件转换为 Base64，并为 WOFF、WOFF2、TTF 和 OTF 字体生成 CSS @font-face 代码。将字体直接内联到样式表中——无需外部字体文件。
拖拽字体文件到此处或点击选择
WOFF · WOFF2 · TTF · OTF · EOT — 最大 25 MB
字体大小提示： Base64 字体会增大 CSS 文件体积，且浏览器无法单独缓存。对于大型字体，直接提供字体文件并配置适当缓存通常是更好的选择。
如何将字体转换为 Base64
上传字体文件
将 WOFF、WOFF2、TTF、OTF 或 EOT 文件拖放到工具中。字体名称会根据文件名自动填写。
设置字体选项
输入 font-family 名称，选择 font-weight 和 font-style，使其与您在 CSS 中的使用方式一致。
复制 CSS 代码
点击「生成 CSS」并复制 @font-face 代码块，粘贴到您的样式表中——无需外部字体文件。
如何在 CSS 中使用 Base64 字体
将生成的 @font-face 代码块粘贴到 CSS 文件顶部或 <style> 标签内，然后按名称在任何位置使用该字体：
style.css
@font-face {
font-family: 'MyFont';
src: url('data:font/woff2;base64,...')
format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyFont', sans-serif;
}何时（不）使用 Base64 字体
适合场景
- 20 KB 以内的小型图标字体或子集字体
- 外部文件 URL 被屏蔽的邮件模板
- 单文件 HTML 文档或离线应用
- 避免为小字体产生额外的 HTTP 请求
不适合场景…
- 字体文件大于 50 KB——33% 的 Base64 开销不可忽视
- 需要浏览器单独缓存字体文件
- 加载多个字重或样式——内联字体会快速增大体积
- 已在使用 Google Fonts 或 Adobe Fonts 等字体服务
- 性能敏感且 CSS 包体积至关重要
WOFF2 vs WOFF vs TTF
内联 Base64 时，字体文件越小，CSS 体积越小。始终优先使用 WOFF2。
| 格式 | 扩展名 | 文件大小 | 浏览器支持 | Base64 建议 |
|---|---|---|---|---|
| WOFF2 | .woff2 | 最小 | 所有现代浏览器 | 首选 |
| WOFF | .woff | 较小 | 所有现代浏览器 + IE9+ | 备选 |
| TTF | .ttf | 较大 | 所有浏览器 | 仅兼容性 |
| OTF | .otf | 较大 | 所有浏览器 | 仅兼容性 |
| EOT | .eot | 较大 | 仅 IE（已废弃） | 不推荐 |
常见问题
什么是 Base64 字体？
Base64 字体是将字体文件编码为 Base64 文本后，以 Data URI（data:font/woff2;base64,…）的形式直接嵌入 CSS @font-face 规则中的字体。字体随样式表一同加载，无需单独的 HTTP 请求。
如何在 CSS 中使用 Base64 字体？
将生成的 @font-face 代码块粘贴到样式表中，然后在任意 CSS 规则中使用 font-family: 'YourFontName'。浏览器会解码 Base64 并渲染字体，无需获取外部文件。
内联字体会影响页面性能吗？
会的。Base64 字体会使 CSS 文件大小增加约 33%。一个 30 KB 的 WOFF2 字体会在样式表中变为约 40 KB 的文本。对于小型字体来说这是可以接受的；对于大型字体，建议单独提供字体文件，以便浏览器独立缓存。
应该对哪种字体格式进行 Base64 编码？
尽量使用 WOFF2——它压缩率最高，且所有现代浏览器均支持。WOFF 是 IE9+ 的良好备选。避免对 TTF 和 OTF 进行内联，因为它们比 WOFF2 大得多。
可以对字体子集进行 Base64 编码吗？
可以，但本工具会对您上传的完整字体文件进行编码。如需先对字体进行子集化（仅保留所需字符），可先使用 pyftsubset 或在线字体子集化工具处理后再上传。子集化后的字体体积更小，更适合内联使用。
字体文件在哪里处理？
完全在您的浏览器中处理。字体文件通过 FileReader API 在本地读取，不会发送到任何服务器。Base64 编码和 CSS 生成均在客户端完成。