上传字体文件 · 自动生成跨浏览器@font-face CSS · 支持Base64内嵌
@font-face 是CSS规则，允许网页使用服务器上的自定义字体，而不必依赖用户本地安装的字体。您可以通过@font-face使用任何字体文件（需有授权），实现独特的品牌字体和设计效果。本生成器帮助您快速创建兼容多浏览器的@font-face CSS代码。
Base64内嵌：字体数据直接嵌入CSS文件中，无需额外HTTP请求，适合小字体（<50KB）。优点是减少请求数，缺点是CSS文件变大且不能被浏览器缓存复用。外部文件：通过url()引用字体文件，适合大字体，可被浏览器独立缓存。本工具支持两种方式，使用Base64适合图标字体和小型定制字体。
在使用自定义字体前，必须确认您拥有合法授权。商业字体通常需要购买Web字体许可证。免费字体（如Google Fonts、Open Font Library）可自由使用。本工具只处理您自己上传的文件，建议只上传您有合法使用权限的字体。字体处理完全在您的浏览器本地完成，不会上传或被记录。
WOFF2（Web Open Font Format 2）是专为网页优化的字体格式，使用Brotli压缩，文件大小通常比TTF小30-50%。WOFF2被所有现代浏览器支持（Chrome、Firefox、Safari、Edge、Opera）。TTF/OTF是桌面字体格式，兼容性更广但文件更大。建议：优先使用WOFF2，TTF作为后备。
font-display:swap 是CSS属性，控制自定义字体的加载行为。使用swap时，浏览器先用系统字体显示文本（FOUT），等自定义字体加载完成后立即替换。这解决了FOIT（Flash of Invisible Text，不可见文本闪烁）问题，用户不需要等待字体加载就能阅读内容。本工具默认使用swap，推荐用于绝大多数场景。
💡 所有文件处理在浏览器本地完成，字体数据不上传服务器。支持离线使用。