CSS 字体栈生成器

勾选常见字体族即可组合生成 font-family 字体栈,自动为含空格的字体名加引号,并在末尾补全通用回退字体。浏览器按顺序匹配第一个可用字体,因此字体栈的顺序与兜底决定了最终显示效果。

字体栈参数 已就绪
自定义字体名(可选,逗号分隔)
通用回退字体

勾选、取消或输入自定义字体后即时更新;通用回退字体始终追加在字体栈末尾。

实时预览与代码
字体栈预览:永远相信美好的事情即将发生 The quick brown fox jumps over the lazy dog · 0123456789

          

生成的 CSS 将显示在这里。

使用规则
  • 字体名按书写顺序匹配,越靠前优先级越高。
  • 字体名含空格或非标识符字符时需加引号。
  • 通用字体族(serif、sans-serif、monospace、cursive、fantasy、system-ui)不加引号。
  • 字体栈末尾务必保留通用字体族作为回退。
  • 本工具完全在浏览器本地运行,输入数据不会上传到任何服务器。