@font-face 网页字体生成器
可变字体、WOFF2 和 CSS 一键搞定
将您的 TTF、OTF、WOFF 或 WOFF2 文件 — 包括可变字体 — 拖放，选择您的设置，然后下载一个准备托管的捆绑包，包含 WOFF2、WOFF、完整的 stylesheet.css 和一个实时演示页面。
将字体拖放到此处或单击浏览
TTF、OTF、WOFF、WOFF2 和可变字体 — 允许多个文件
已选择字体
转换设置
这是您在 CSS 中使用的名称，例如 font-family: 'MyName';。留空以保留每个字体的原始系列名称。
控制文本在网页字体加载时的显示方式。
在生成的样式表中 url(...) 内使用的路径。
提示：按 Ctrl+Enter 生成。
您的网页字体包已准备好
ZIP 包含：转换后的字体、stylesheet.css 和一个实时 demo.html。
100% 客户端
转换完全在您的浏览器中使用 WebAssembly 运行。您的字体永远不会被上传。
可变字体和所有格式
TTF、OTF、WOFF 和 WOFF2 输入 — 优化的 WOFF2 输出，支持完整的可变字体轴（wght、wdth、slnt、ital）。
生产就绪的输出
提供一个包含正确字体显示、可选 local() 和 demo.html 的 stylesheet.css，以便您可以直接将捆绑包放入您的项目中。
什么是网页字体生成器？
网页字体生成器将桌面或下载的字体文件（TTF、OTF、WOFF、WOFF2 — 包括现代可变字体）转换为浏览器可以通过网络加载的格式 — 主要是今天的 WOFF2，WOFF 作为遗留回退 — 并生成匹配的 CSS @font-face 声明，以便您可以自托管网站的排版。
为什么自托管字体？
自托管使您完全控制性能、隐私和可靠性。没有对 Google Fonts 的第三方请求（对 GDPR 有帮助），没有额外的 DNS 查找，您可以预加载文件，并且您可以精确决定哪些字重、样式和轴与您的网站一起发送。
转换是如何工作的
WOFF2 将您的 TTF/OTF 轮廓包装在一个专为网络设计的 Brotli 压缩容器中 — 通常比 WOFF 小 30%，比原始 TTF 小 50% 以上。WOFF 是一个较旧的 zlib 压缩包装，保留作为非常旧浏览器的回退。我们的生成器运行 Google 的官方 WOFF2 编码器和解码器，编译为 WebAssembly，因此转换在您的浏览器内部本地发生。将从 Google Fonts 下载的 WOFF2 文件放入，我们会透明地将其解码回 sfnt 容器，然后重新编码 — 您无需寻找原始 TTF。
您在包中获得的内容
- 每个上传的字体都以 WOFF2（可选 WOFF/TTF）格式提供 — 包括作为单个小文件保留的可变字体。
- 一个完整的 stylesheet.css，每个文件一个 @font-face 规则，正确的 format() 提示，字重范围，字形，字宽，字体显示和可选的 local()。
- 一个 demo.html 页面，以便您在上线之前可以预览每个字重、样式和轴的多个大小。
- 可选的 Base64 嵌入，以便在您的 CSS 中内联发送字体，适用于离线优先或单文件场景。
隐私与许可
文件永远不会离开您的设备 — 一切都在您的浏览器中处理。发布到您的网站之前，请始终确保您的字体许可允许网页字体嵌入。