transfonter.org 是知名免费在线WebFont网页字体生成器，前端用来把本地TTF/OTF字体，转成网页可用的字体格式，自动输出完整@font‑faceCSS代码包。
✨核心能力
字体格式转换
输入：TTF、OTF、WOFF、WOFF2、SVG、TTC等；
输出：EOT(IE旧版)、WOFF、WOFF2、TTF、SVG。WOFF2优先选用，压缩率最高，现代浏览器全部支持；EOT、SVG属于老旧兼容格式，现代项目一般不勾选。
- 字体子集 Subset（重点优化功能）
- All：保留全部字符；
- Characters：自定义输入需要的文字（只保留用到的字，大幅缩减字体体积，中文场景强烈推荐）；
Unicode ranges：填写Unicode编码范围，筛选字符集。
中文完整字体体积巨大，通过子集只保留页面实际用到汉字，可以把几MB字体压缩到几十KB级别。
- 高级转换选项
Fix vertical metrics：修复字体垂直排版基线错乱，解决不同浏览器文字上下偏移；Add local rule：生成local()，优先读取用户本机已安装字体，减少网络下载；Base64 encode：字体直接编码嵌入CSS，不再输出独立字体文件；适合小程序、少量字符场景；大字体不建议开启，CSS文件会膨胀；Hinting：字体微调渲染提示，Keep existing保留原有 / TTFAutohint自动优化 / Strip hinting移除提示；Font‑display：直接设置swap / block / fallback / optional，控制字体加载闪烁行为，推荐swap；Fonts directory：自定义CSS里字体文件路径，适配项目目录结构。- 输出产物
点击Convert后下载zip压缩包，包内包含： - 转换后的字体文件；
stylesheet.css：完整@font‑face样式；- demo演示html页面，可直接预览字体效果。
- 附加工具：
Font‑info页面，可以上传字体查看字体内部元数据、字符列表。
📝最简使用流程
- 打开网站，
Add fonts上传你的ttf/otf字体； - Formats：只勾选 WOFF、WOFF2（现代项目，放弃IE兼容）；
- Font‑display：选
swap； - Subsets：按需裁剪字符子集（中文必做）；
- 按需开启Fix vertical metrics；
- 点击
Convert→ 下载zip； - 解压，把字体文件放到项目，引入
stylesheet.css即可使用。
⚠️注意事项
- 文件上传服务器处理：字体文件会上传到服务商服务器。商业付费字体、涉密字体不要使用，可选择浏览器本地处理的替代工具。
- 版权：必须使用拥有合法授权的字体文件，工具本身不提供字体。
- EOT只用于兼容老旧IE，现代网站不需要勾选。
- 中文字体：完整中文字体体积巨大，务必做子集裁剪，否则网页加载极慢。
- CSS路径问题：如果你的字体文件和css不在同一目录，需要手动修改stylesheet.css里面
url()路径。
✅最佳实践（WordPress/普通网页）
- 输出格式：WOFF + WOFF2；
- font‑display: swap；
- 开启Fix vertical metrics；
- 不开启Base64；
- 中文做字符子集，只保留页面实际使用汉字。
生成好woff2字体后，就可以放到你的Nginx站点，配置@font‑face，同时Nginx给woff2增加长期缓存头，提升网页性能。
评论0
暂时没有评论