跳到主要内容

CSS 系统字体栈生成器:跨 Win/Mac/Linux/iOS/Android 完整 fallback + CJK 中日韩兜底, 一键复制 CSS / Tailwind / SwiftUI

CSS 系统字体栈生成器, 跨 Win/Mac/Linux/Android/iOS 完整 fallback 链, 含 CJK 中日韩兜底, 一键复制 CSS / Tailwind / SwiftUI 代码。

  • 本地处理
  • 分类 生成器
  • 适合 从空白开始,先拿到一版可修改的结果。
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
The quick brown fox jumps over the lazy dog
简中 · 人有悲欢离合 月有阴晴圆缺 此事古难全
繁中 · 舉頭望明月 低頭思故鄉 一片冰心在玉壺
日 · いろはにほへと ちりぬるを わかよたれそ つねならむ
한 · 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사
macOS · -apple-system
Aa Bb Cc 123
The quick brown fox
Windows · "Segoe UI"
Aa Bb Cc 123
The quick brown fox
Linux · Roboto
Aa Bb Cc 123
The quick brown fox
✓ 检测全部通过。
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

这个工具能做什么

给前端和设计师用的字体栈生成器, 一次性给出在 macOS / Windows / Linux / Android / iOS 上都能正确渲染的 `font-family` 兜底链, 不用再凭记忆敲 `"Helvetica Neue", Helvetica, Arial, sans-serif`, 也不用担心 Linux 上把顺序写反退到 Liberation。 8 种字体风格覆盖几乎所有真实场景: 现代无衬线 (Inter / Roboto / system-ui, GitHub / Vercel / Stripe 那种感觉), 经典无衬线 (Helvetica / Arial, 纽约时报那种感觉), 衬线 (Georgia / Source Serif), 优雅衬线 (Garamond / Times), 等宽 (SF Mono / Consolas), 复古等宽 (Courier), 手写 (Caveat / 笔刷), 装饰 (Impact / Oswald)。 每种风格都按真实 OS 命中顺序排好: macOS 优先 (PingFang, SF Pro), 然后是 Windows (Segoe UI, 微软雅黑), 再是 Linux (Noto, DejaVu, Liberation), 再是 Android 与 iOS, 最后用 `system-ui` 加通用族兜底, 永远不会退到浏览器默认 Times。 CJK 当一等公民处理: 选简中 / 繁中 / 日文 / 韩文, 工具会把对应语言的 OS 原生字体 (PingFang / 微软雅黑 / Source Han Sans / Hiragino Sans / Yu Gothic / Apple SD Gothic Neo / Malgun Gothic) 加到栈最前面, 再加 Noto Sans 兜底。 浏览器对单条 font-family 做的是 按字符回退, 中文字符走 CJK 族, 英文字符走 Latin 族, 双语一条栈搞定。 实时预览同时显示 4 行 (英 / 中 / 日 / 韩), 跨平台对照面板把同一栈在 Win / Mac / Linux 上"最可能命中的字体"并排显示, 你一眼看出 Linux 是 不是其实是 Liberation Sans。 fallback 深度 (3 / 5 / 7) 控制栈长度。 4 种导出: CSS `font-family`, Tailwind config 数组, SwiftUI `Font.system(...)`, SCSS 变量。 常见错误检测: 末项不是 system-ui 或通用族时高亮警告。这是字体栈最常见的隐式失败模式。 100% 浏览器本地, 所有输入接 URL, 链接发同事直接复现。

工具细节

输入
结构化内容
页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
输出
即时结果 + 复制 + 预览
结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
隐私
浏览器本地处理
主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
保存 / 分享
可分享链接状态
关键设置会进入 URL，复制链接后别人能复现同一组参数。
性能预算
首屏 JS ≤ 22 KB
没有声明 WASM 依赖，适合快速打开和移动端使用。
适用场景
生成器 · 设计师
分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。

怎么用

  1. 1. 输入

    把内容粘贴或拖入工具面板。

  2. 2. 处理

    点击按钮,在浏览器内本地处理,文件不上传。

  3. 3. 复制 / 下载

    一键复制结果或下载到本地。

CSS 系统字体栈生成器 适合怎么用

适合快速生成初稿、起步素材或结构化结果,再人工整理后发布。

适合生成任务

  • 从空白开始,先拿到一版可修改的结果。
  • 生成可重复使用的草稿、名称、模板或占位素材。
  • 先探索多个选项,再挑最适合当前任务的。

生成检查项

  • 生成内容发给客户、上页面或进文档前,必须人工看过。
  • 有品牌语气、格式或受众要求时,不要沿用默认值。
  • 只保留真正符合任务的部分。

下一步可以接着做

这些入口会把当前任务接到更完整的工具链里。

  1. 1 PX REM EM 换算器 CSS px ↔ rem ↔ em 互转,可视化尺度对比,根字号可调。 打开
  2. 2 CSS clamp() 流式字号生成器 CSS clamp() 流式字号生成器, 最小/最大字号+视口范围 自动算 clamp 公式, 一键生成完整 h1-h6+body 排版字号表, 复制 CSS / Tailwind。 打开
  3. 3 CSS 阴影生成器 Pro CSS 阴影生成器 Pro 版, 支持多层 box-shadow / text-shadow / filter:drop-shadow 三合一, 内置 Material/Tailwind/Apple/极光 4 套预设, 含暗色模式预览。 打开

真实使用场景

  • 修掉 Windows 上崩掉的祖传 `font-family`

    CSS 里写的是三年前 Mac 上调好的 `font-family: "Helvetica Neue", sans-serif`。 Windows 用户打开站, Helvetica 没装, 浏览器回退到通用无衬线 (新版浏览器是 Arial 还行, 老浏览器是 Times 整页变衬线就难看了)。 在这里生成深度 5 的 "经典无衬线"栈, 得到 `"Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif`。 粘进去 commit, Windows 用户终于看到 Arial (设计想要的视觉), 老浏览器回退 Times 这个隐患没了。 三年没做的 2 分钟修复。

  • 给双语营销站加中文 fallback

    落地页主要英文, hero 有个中文产品名, 页脚有句中文 tagline。 现在的栈是 `Inter, sans-serif`,中文字符回退到浏览器 "last-resort CJK", Linux 上经常是个粗位图。 这里生成现代无衬线, CJK 选"简中", 输出会在你的 Inter 链前面加上 `"PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC"`。 浏览器按字符回退, 英文字符照样走 Inter, 中文字符现在 Mac 走 PingFang, Windows 走 YaHei, Linux 走 Source Han Sans。 一次粘贴, 两种语言都对。

  • 落地 Figma "用系统字体, 不要加载 Google Fonts" 的规格

    设计师丢一个 Figma 注释:"用 OS 系统字体, 不要加载 web font"。 你知道意思是 system-ui 优先, 但你也知道 `system-ui` 单独写 在老 Android 和 IE 上不灵。 在这里生成"现代无衬线"深度 5 , 打开 system-ui 优先, 得到 `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, GitHub 风格的栈, 现代平台都能命中 OS UI 字体, 老平台退到 Roboto / Arial。 零 web font 加载, 零 CLS, Google Fonts 零账单。 三分钟从规格到 commit。

  • 给 Tailwind 项目配一份说得过去的 `font-sans` 默认

    Tailwind 默认的 `font-sans` 是 `ui-sans-serif, system-ui, ...`, 凑合能用, 但前面没有给中文用户加的 PingFang / 微软雅黑。 这里生成现代无衬线, CJK 开"简中", 切到 Tailwind 导出, 得到一段 `fontFamily: { sans: [...] }` 直接粘到 `theme.extend` 下。 中文用户在 Mac 上看到的不再是 Tailwind 默认的 ui-sans-serif (Mac 上恰好是 SF Pro, 没有 CJK 字形, 完全靠系统隐式兜底), 而是显式的 PingFang。 fallback 从隐式变显式, 行为可预测。

  • 一次粘贴定下品牌 typography 规格

    品牌团队要一份单页的 typography 规格: 标题栈、 正文栈、 等宽栈, 外加 CJK 变体。 用这个工具跑 4 次 (装饰 / 现代无衬线 / 等宽, 带 / 不带 CJK), 把每条 CSS 粘到品牌文档里, 标好"标题: ... / 正文: ... / 代码: ..."。 设计、 工程、 运营都引同一份 source of truth, SwiftUI 导出顺手覆盖 iOS app。 工具的分享 URL 让任何人都能重新打开 验证当时选的是哪个深度、 哪种 CJK。

  • 审计老项目里没写通用族兜底的 font-family

    接手一份 CSS 有 30+ 处 `font-family:` 声明, 没有一处以 `sans-serif` 或 `serif` 结尾。 工具里的"常见错误"块就在提醒这种隐式失败: 首字体没装时静默退到浏览器默认 (一般是 Times)。 用这里输出的 8 个标准栈作为 canonical, codemod 老文件改成引用 8 个 CSS 变量 (`--font-sans`、 `--font-serif`...), commit。 bundle 更小 (一个分类一栈, 不是 30 行散写), 回归风险更低 (不可能漏掉通用族), 下次品牌升级改 8 行不是 30 行。

常见踩坑

  • 栈结尾忘写通用族。 `font-family: Inter` 后面没有 `sans-serif` 兜底, Inter 没装 / 加载失败时会落到浏览器默认 (一般是 Times)。 必须以 `system-ui, sans-serif` (或 `serif` / `monospace`) 结尾, 本工具默认强制加上。

  • 把 CJK 字体放在 Latin 字体后面。 现代浏览器虽然按字符回退, 但 CJK 字符在栈里仍然从左往右找, 如果你的 Latin 字体里有低质量 CJK 字形, 浏览器就会用那些, 不会再往后找到 CJK 族。 中日韩字 符要让对应 CJK 字体写在 Latin 前面。

  • 给没空格的字体名加引号 (写 `"Inter"` 而不是 `Inter`)。 不是 功能 bug, 但多了字节也容易让 linter 报警。 CSS 只要求多词名加 引号, 比如 `"Segoe UI"` / `"Helvetica Neue"`。 本工具只在必要时 加引号。

  • 只用 `BlinkMacSystemFont` 不写 `-apple-system`。 `-apple-system` 是 Safari 的正确关键字, `BlinkMacSystemFont` 是 Chromium-on-Mac 的兜底。 必须两个都写, 顺序是 `-apple-system, BlinkMacSystemFont`, 这是 GitHub 推的写法。 缺一个就丢一半 Mac 浏览器份额。

  • 只写 `font-family: 'system-ui'` 不带其他兜底。 IE 不支持 `system-ui`, 老 Android 浏览器部分支持。 必须跟 `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto` 一起写, 让现代平台命中 OS 字体, 老平台优雅降级。

  • SaaS 产品的栈里把 Roboto 写在 `-apple-system` 前面。 Roboto 是 Android / ChromeOS 默认; 如果 Mac 用户本地装了 (设计师经常装), 就会用 Roboto 不是 SF Pro, 整个 macOS 上看着"有点像 Android 应用"。 想 Mac 上命中 SF Pro, Apple 系统字体一定写最前面。

隐私说明

你做的每一个选择 (选哪种风格、 选哪种 CJK 语言、 fallback 深度多少、 复制哪种导出格式) 全部留在你的浏览器里。 工具是 嵌在 Astro 静态页上的一个 React 岛, 生成和复制字体栈完全前端, 没有任何服务端 endpoint 参与, 不统计你选了哪种风格, 不打点你 复制了哪种导出。 分享 URL 里只有配置 (风格 key、 CJK 语言、深度), 没有用户 ID, 没有 session token, 没有跟踪参数。 打开工具、选栈、 复制、关掉标签页,没有一个字节离开你的设备。 预览的示范文本是 工具里写死的几行样例, 不会从远端加载字体,整个工具的目的本来 就是"系统已有字体的 fallback 链", 无需网络。

常见问题

类似工具组合

做你这行的人, 还会一起用这些。

看这个职业的全部工具
Made by Toolora · 100% client-side · Updated 2026-06-13