功能简介
CSS 字体栈生成器用访客设备上已经安装的字体，生成可以直接粘贴的 font-family 值。选择一种风格，比如系统界面字体、Inter 和 Helvetica 这类新怪诞体、Charter 这类过渡衬线体，或者适合写代码的等宽字体，工具会按正确顺序列出各平台上最合适的字体。
字体栈参考了 Modern Font Stacks 项目，另外提供很多网站仍在用的经典写法 -apple-system, BlinkMacSystemFont, "Segoe UI"。还可以为简体中文、繁体中文、日文、韩文、阿拉伯文、泰文或印地文加上回退字体，并在末尾加入彩色 Emoji 字体。
使用方法
- 选择「字体栈」，左侧预览会用你当前设备上的字体显示效果，预览文字可以直接修改成你自己的内容。
- 页面里有中日韩、阿拉伯、泰文或印地文时，在「其他文字的字体」里选择对应的语言。
- 打开或关闭「加上 Emoji 字体」。
- 选择「输出格式」：
font-family声明、CSS 变量、Tailwind 的fontFamily配置，或纯列表。 - 复制结果，或下载为
.css文件。
含空格或以数字开头的字体名会自动加引号；system-ui、sans-serif 这类 CSS 关键字不会加引号，因为加了引号它们就变成了不存在的字体名。
示例
系统界面字体加简体中文回退：
font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";小提示
- 正文用一套字体栈，代码用一套等宽字体栈，系统字体不需要下载，零成本。
- 预览取决于你自己设备上装了哪些字体，最好在 Windows 和手机上也看一下。
- 以后要加网络字体时，把它放在最前面，保留系统字体栈作为回退。
常见问题
› 什么是字体栈？
就是 CSS font-family 里的一串字体名。浏览器会用设备上已安装的第一个字体，找不到就往后退，最后落到 sans-serif 这样的通用字体族。
› 为什么要加中文字体？
Inter、Charter 等西文字体没有中文字形。在通用字体族前面列出苹方、微软雅黑、思源黑体等字体，中文就会用风格匹配的字体显示，而不是交给系统随便挑。阿拉伯文、泰文和印地文（天城文）也是一样。俄文、乌克兰文、希腊文、越南文、土耳其文、波兰文等拉丁或西里尔字母的语言不需要额外设置，每个字体栈里的系统字体和 Noto 字体都已经覆盖。
› Emoji 字体为什么放在 sans-serif 后面？
Emoji 字体只包含表情符号。放在最后可以保证普通字母和数字不会被 Emoji 字体渲染，同时表情在各个平台都显示为彩色。
› 这些字体需要下载网络字体吗？
不需要。所有字体栈只用 Windows、macOS、iOS、Android 或常见 Linux 发行版自带的字体，页面加载时没有任何字体请求。