字体转 CSS

将 TTF / WOFF / WOFF2 字体文件转为 Base64 编码的 CSS @font-face 代码。适用于微信、支付宝、抖音、百度等所有小程序平台。在浏览器本地处理,文件不上传。

拖拽字体文件到此处
或点击选择文件 · 支持 TTF / WOFF / WOFF2 · 最大 2MB
生成的 CSS 代码

          
        

常见问题

为什么小程序需要把字体转成 Base64?

微信、支付宝、抖音等小程序平台不支持直接引用本地字体文件(如 .ttf.woff.woff2)。解决方案是将字体文件以 Base64 编码内嵌到 CSS 的 @font-face 中,这样字体数据直接存储在样式文件中,无需额外加载。注意 Base64 会使文件体积膨胀约 33%,单个字体文件建议不超过 2MB。

TTF、WOFF、WOFF2 格式有什么区别?该用哪个?

TTF(TrueType):兼容性最好,但体积最大,适合对兼容性要求极高的场景。WOFF(Web Open Font Format):TTF 的压缩版本,体积减少约 30%,浏览器支持广泛。WOFF2:WOFF 的升级版,Brotli 压缩算法,体积减少约 50%,推荐首选。在 iconfont.cn 下载时建议勾选 WOFF2 格式以获得最小体积。

生成后如何在小程序中使用?

将生成的 .css 文件放入小程序项目(微信小程序需改后缀为 .wxss),在 app.wxss@import 引入。然后搭配从 iconfont.cn 下载的配套 CSS(含图标类名和 content 码点),例如 .icon-heart::before { content: '\e001'; }。最后在 WXML 中使用:<text class="iconfont icon-heart"></text>

数据安全吗?上传的字体文件会被发送到服务器吗?

绝对不会。所有文件读取和 Base64 编码均在浏览器本地完成——字体文件通过 FileReader API 读入内存,在本地进行编码转换。没有任何数据被发送到服务器,即使完全断开网络连接也可正常使用。这是 GoGoGong 所有工具的核心设计原则。