字体
demo.woff2
输出
@font-face { src: url(data:font/woff2;base64,...) }设计配色
字体 Base64 编码 - @font-face 生成工具
在浏览器本地将字体文件编码为 Base64，并生成可嵌入的 @font-face 片段，适合 Demo、邮件模板和单文件页面临时内联字体。
字体Base64CSS
设计配色
字体 Base64 编码
在浏览器本地将字体文件编码为 Base64，并生成可嵌入的 @font-face 片段，适合 Demo、邮件模板和单文件页面临时内联字体。
拖放字体文件至此处
支持 TTF / OTF / WOFF / WOFF2
请先上传字体文件
@font-face Data URI
实时预览
使用场景
- 制作单文件演示页
- 临时内联字体资源
- 检查字体编码后体积
如何使用
- 选择字体文件
- 填写字体名
- 复制生成的 @font-face
示例输入输出
FAQ
适合生产环境吗？
大字体内联会显著增加 CSS 体积，生产环境通常更适合独立字体文件与缓存。
字体会上传吗？
不会。读取与 Base64 编码都在浏览器本地完成。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。