字体族预览
同一段文字在不同 font-family 下的真实效果，顺便告诉你这台机器上装了哪些字体，并生成可直接贴走的 CSS。
改成你站点里真实的标题或正文更好判断效果。标「本机可用」的字体是刚才在这台机器上探测出来的，换个设备结论可能不同。
预设字体栈（16 套）
系统 UI 栈 · 本机命中 0 / 7
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
各平台各自的系统界面字体，中英文都最协调，做工具类站点首选
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
系统黑体（中文优先） · 本机命中 0 / 5
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
中文先落到苹方/雅黑，英文退到 Helvetica，适合中文为主的界面
font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Heiti SC', sans-serif;
思源黑体 · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
开源可商用，Linux 上常见，字体名在各国版本里略有差异所以多写几个
font-family: 'Source Han Sans SC', 'Noto Sans SC', 'Source Han Sans CN', 'Noto Sans CJK SC', sans-serif;
苹方 · 本机命中 0 / 3
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
macOS 和 iOS 的默认中文黑体，字形干净，缩放后小字号也清楚
font-family: 'PingFang SC', 'PingFang TC', 'Hiragino Sans GB', sans-serif;
微软雅黑 · 本机命中 0 / 3
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
Windows 上的中文默认字体，配 Segoe UI 做英文，是老项目的安全选择
font-family: 'Microsoft YaHei', 'Microsoft YaHei UI', 'Segoe UI', sans-serif;
宋体 · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
传统衬线中文，屏幕阅读体验一般，适合正式文档和打印
font-family: 'Songti SC', SimSun, NSimSun, STSong, serif;
思源宋体 · 本机命中 0 / 3
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
开源宋体，笔画比思源黑体更有阅读节奏，适合长文正文
font-family: 'Source Han Serif SC', 'Noto Serif SC', 'Source Han Serif CN', serif;
苏州宋 / 华文宋体 · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
苹果系统里的 STSong 一系，和 Windows 的 SimSun 字形不完全一样，两个都写上
font-family: STSong, 'Songti SC', SimSun, 'Noto Serif SC', serif;
SF Mono · 本机命中 0 / 6
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
macOS 终端和 Xcode 的等宽字体，装上以后代码块最整齐
font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
Cascadia Code · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
微软随 Windows Terminal 发布的等宽字体，带连字版本叫 Cascadia Code
font-family: 'Cascadia Code', 'Cascadia Mono', Consolas, Menlo, monospace;
Consolas · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
Windows 上的老牌等宽字体，字宽紧凑，一屏能放更多代码
font-family: Consolas, Menlo, Monaco, 'Courier New', monospace;
思源黑体 Mono / 更纱黑体 · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
中英文都能等宽的等宽字体，中英混排的表格和代码对齐才不会歪
font-family: 'Sarasa Mono SC', 'Source Han Mono SC', 'Noto Sans Mono CJK SC', Menlo, monospace;
圆体 · 本机命中 0 / 5
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
笔画末端圆润，亲和力强，适合亲子、活动类页面，正文别用
font-family: 'Yuanti SC', 'Hiragino Maru Gothic ProN', 'Varela Round', Quicksand, 'PingFang SC', sans-serif;
Helvetica 系（英文） · 本机命中 0 / 5
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
纯英文界面的经典组合，中文会退到系统默认黑体
font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
Georgia 系（英文衬线） · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
网页上最耐读的英文衬线体之一，中文字符交给宋体类兜底
font-family: Georgia, 'Times New Roman', 'Songti SC', SimSun, serif;
中英印刷正文 · 本机命中 0 / 4
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
英文走衬线、中文走宋体，适合仿纸质的阅读页和导出文稿
font-family: Georgia, 'Source Han Serif SC', 'Songti SC', SimSun, serif;
自建字体栈
中文排版示例：一键打包 yjdb.com ABCdef 0123456789
- PingFang SC本机未装
- Segoe UI本机未装
- Microsoft YaHei本机未装
- sans-serif本机未装
按住某一行可以拖动排序，也可以用「上移 / 下移」按钮。顺序就是 CSS 里的查找顺序，写得越靠前越优先。
点一下加入，通用族（sans-serif / serif / monospace）建议留在最后一位，前面的字体全都缺失时它来兜底。
字体回退到底怎么走的
font-family 写的是一个候选列表，不是「用这个字体」。浏览器从左到右找第一个本机存在的字体，找到就用它渲染整段文字；列表里一个都没有命中时，才落到最后的通用族，由系统给一个默认字体。所以写字体栈时最后一定要留 sans-serif、serif 或 monospace，否则缺字体时行高和字宽可能完全变样。
更麻烦的是单个字符级别的回退：中文主字体里没有某个生僻字、或者没有 emoji 和符号时，浏览器会单独为那个字符换字体，结果同一行文字出现两种字形、字重也不一致。中文站点里把「中文优先、英文退到系统西文字体」写清楚（例如 PingFang SC 之后跟 Helvetica Neue），比反过来更常见也更稳。
各平台的默认中文字体并不相同：Windows 是微软雅黑（旧系统是宋体），macOS 和 iOS 是苹方，Linux 上常见文泉驿和思源黑体，Android 近几代是 Noto Sans CJK 加 HarmonyOS Sans 一类的定制字体。所以同一个 font-family 在不同系统上的观感会有差异，做高一致性要求的页面要么自带 Web 字体，要么就接受这种平台差异。
自建字体时要把 font-display 想清楚：swap 先用兜底字体渲染、字体下载完再替换，页面不会白字，但会发生字形跳动；optional 更保守，网络慢时干脆不用 Web 字体。中文字体动辄几 MB，整包加载很浪费，所以常见做法是只把标题或首屏需要的少量字子集化，正文继续用系统字体。
这里的「本机可用」用 canvas 宽度对比法探测：同一串字符分别用「候选字体 + 兜底字体」和「只有兜底字体」量一次，宽度不同就说明候选字体真的生效了。它只能告诉你字体在不在，不能告诉你字体有几个字重、有没有斜体，也没法在字体没装时把效果画出来——那属于 Web 字体加载，要另外做。