Webfont 生成器

WEBFONT IMPLEMENTATION GUIDE

Webfont 生成器适合什么场景

Webfont 生成器适合前端开发者、设计师和需要把字体用于网页原型的团队。桌面字体文件通常以 TTF 或 OTF 形式交付，网页项目则经常需要在 CSS 中通过 `@font-face` 声明字体族、资源地址、字重、样式和加载策略。工具会先在浏览器本地加载字体，让你用真实文件观察中文、英文、数字和标点的显示效果，然后根据文件名和填写的参数生成基础 CSS 与 HTML 示例。

字体族名称、字重和样式必须保持稳定。同一套字体的 Regular、Medium、Bold 文件应使用相同的 `font-family`，通过不同的 `font-weight` 区分；如果每个文件都写成不同字体族，浏览器就无法正确匹配字重。生成的资源路径是项目示例路径，部署到网站时要替换成生产环境真实地址，并确保文件的 Content-Type、缓存策略和跨域响应头配置正确。

为什么只生成 CSS，不直接转换字体格式

TTF、OTF、WOFF 和 WOFF2 不是简单改后缀就能互相转换的格式。真正的 Webfont 转换还涉及压缩、表结构、字符子集化、授权范围和浏览器兼容性。如果网页工具把文件改名后当成新格式下载，极易导致字体加载失败，也会掩盖字体许可证不允许网页嵌入的问题。因此，本页保留你选择的原始文件格式，只生成可复制的 CSS 配置和预览图片；需要格式转换或中文字体子集化时，应使用经过验证的字体工具，并先确认许可证允许。

上线前建议优先准备 WOFF2，并根据项目兼容范围保留 WOFF。中文字体文件往往很大，可以按页面实际字符做子集化，但子集化后必须用真实文案检查缺字。CSS 中可以使用 `font-display: swap` 减少文字长时间不可见，同时配置接近的系统回退字体，避免字体加载时页面宽度变化。最终发布时请保存字体来源、许可证原文、版本号和文件哈希，方便后续维护和授权核对。