CSS @font-face 生成器

设置字体族名称、字体来源、字重、样式与 font-display,工具会生成标准的 @font-face 声明代码,可直接粘贴到样式表开头。全部在浏览器本地完成。

字体设置 等待输入

字体族名与来源为必填项;来源需写明 url() 与 format()。

计算结果
字体族—
字重—
填写字体族与来源后点击生成,CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • @font-face 用于声明自定义字体并注册字体族名。
  • src 需写明 url() 与 format() 以便浏览器选择。
  • font-display: swap 可先显示系统字体再替换,避免文字不可见。
  • 同一字体族可声明多个字重与样式,分别对应不同文件。
  • 建议使用 woff2 格式以兼顾体积与兼容性。