本机字体检测
按分组核对你电脑上装了哪些字体。名字会用该字体本身渲染出来，一眼就能看出它和默认字体有没有区别。
检测范围
正在读取系统字体…清单由页面维护，只覆盖常见字体，不是系统字体册的完整列表。
font-family: sans-serif;
分组概览 检测中
分组只影响展示，检测方法对每个字体都一样：把候选字体和三个通用族分别组合量文字宽度，只要有一个宽度不同就认为字体可用。
系统中文字体
操作系统自带的中文字体。缺了它们网页会退回默认字体，排版可能整体走样。
系统西文字体
系统自带的西文字体。做设计和排版时，缺了这些字体会让字体栈直接落到默认值。
办公套件字体
Office、WPS、Adobe 等软件附带的字体。换电脑打开文档时缺失的常常是这一组。
设计常用字体
设计和品牌工作里常见的字库。商用授权要单独确认，装了不等于可以随便用。
等宽与编程字体
写代码和看日志用的字体。等宽字体的每个字符占同样宽度，对齐才不会错位。
检测原理与它的边界
浏览器没有「列出已安装字体」的接口，这是隐私设计的一部分：字体组合的区分度极高，几十个字体就能把一台设备从人群里认出来，而且用户清 Cookie 也清不掉。所以网页只剩下一个间接通道——把候选字体和通用族组合起来量同一段文字的宽度，如果宽度和只用通用族时不同，就说明候选字体真的被用上了。
这个方法的局限有两个方向。漏报发生在候选字体和通用族的度量完全一致时，比如两个字体其实是同一套轮廓的不同名字；误报则发生在浏览器把通用族也映射到了候选字体上。中文字体还多一层问题：样本字如果全部被回退到别的字体，宽度就测不出差别。所以页面把结果叫「检测到」而不是「已安装」，措辞上是保守的。
字体名在 CSS 里的写法有讲究。名字含空格必须加引号，否则浏览器会把它拆成多个族名；给回退族也是必须的，只写一个字体名时，用户没装就会落到默认字体，中文可能变成宋体、西文可能变成 Times，整页排版都会走样。页面给的字体栈就是按这个原则拼的：先列检测到的中文字体，最后一定以 sans-serif 收尾。
装上不等于能用。系统自带字体的授权通常限于操作系统和随附应用，把渲染结果用于商业物料要看具体许可条款；微软雅黑、苹方这类字体在商用场景里尤其容易踩线。需要商用时优先选明确标注可商用的开源字体，比如思源黑体、Noto 系列，它们的许可允许嵌入和再分发。
想在页面上直接比较几种字体的观感，用字体族预览；需要把设计稿里的 px 换成 rem，用px rem 单位换算；确认显卡和渲染能力可以看GPU 与 WebGL 能力检测。
常见问题
为什么浏览器不能直接告诉我装了哪些字体？
因为字体列表是很好的指纹。不同人装的字体组合差异极大，一旦能直接读取，任何网页都能拿它把用户区分开，即使清了 Cookie 也认得出来。所以浏览器只留下一个间接通道：设置字体后量文字宽度，宽度变了就说明字体存在。这也意味着检测本质上是「猜」，不是权威查询。
检测结果和系统字体册对不上，以哪个为准？
两边都没错，只是口径不同。字体册列出的是系统里所有字体文件，而这里判断的是「网页能不能用这个名字把它调出来」。有些字体虽然装了，但只以族别名注册，或者被浏览器的字体替换策略接管，网页用名字调不到；反过来，两个度量完全相同的字体也可能被误判成同一个。
为什么同一个字体在 Chrome 里有、在 Safari 里检测不到？
不同浏览器对通用族的映射不一样，字体替换策略也不同。检测方法依赖「候选字体和通用族的宽度不同」这个前提，如果浏览器把通用族也映射到了同一个字体，宽度就会相等，于是被判成没装。换浏览器对比时，把差异当成参考，不要当成结论。
中文字体只显示一部分，是不是检测漏了？
很可能是样本字没覆盖到。页面用固定的中英混排样本做测量，如果某个字体对样本里的字全部回退到了别的字体，宽度就会和通用族一致。另外不少中文字体名有多个别名（比如苹方在 CSS 里写 PingFang SC），清单里只收了一个常见的写法。
检测到这个字体，是不是就能随便用在设计里？
不能。装上不等于有授权。系统自带字体通常只授权在操作系统和随附应用里使用，把渲染结果用于商业设计要看具体许可；微软雅黑、苹方这类字体在商用场景里尤其容易踩线。需要商用时，优先选明确标注可商用的开源字体。
页面上这些字体名可以直接写进 CSS 吗？
可以，名字里有空格的必须加引号，比如 "Microsoft YaHei"。稳妥的写法是给一个回退族：font-family: "PingFang SC", "Microsoft YaHei", sans-serif。只写一个字体名的话，用户没装就会落到浏览器默认字体，排版可能完全走样。
为什么检测要花一点时间？
每个字体都要量三次宽度（分别搭配 monospace、serif、sans-serif 三个通用族），再各量一次基准，总共六次文字测量。清单上百个字体就是几百次测量，浏览器还要为每次测量做字体匹配。放在页面加载后执行，避免拖慢首屏。