快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个网页字体检测工具，能够自动分析指定URL页面的字体使用情况。功能包括：1.输入URL后自动爬取页面HTML和CSS 2.提取所有@font-face规则和内联字体样式 3.识别实际渲染字体（包括WebFont和系统字体）4.生成字体使用报告，包括字体名称、大小、颜色和行高等属性 5.可视化展示页面各区域的字体分布。使用JavaScript实现，输出为可交互的Web应用。- 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在做一个前端项目时，突然被设计师灵魂拷问："这个页面到底用了哪些字体？"当时我就懵了，因为项目里混用了系统字体、Google Fonts和本地字体文件。手动检查不仅费时，还容易遗漏。于是研究了下如何用AI技术自动化这个流程，结果发现用InsCode(快马)平台5分钟就能搞出个实用工具。
核心实现思路
网页内容抓取
通过fetch API获取目标网页HTML后，重点提取两类信息：link标签引入的外部CSS，以及style标签内的内联样式。这里要注意跨域问题，实际开发时我用CORS代理做了中转。CSS解析与字体提取
使用正则表达式匹配@font-face规则，捕获font-family和src属性。对于内联样式，则要遍历所有元素的computedStyle，特别注意伪元素(::before/::after)也可能定义字体。字体特征识别
最有趣的部分来了：通过Canvas绘制文字样本，用getImageData获取像素数据。不同字体的字符宽度、笔画粗细等特征会有明显差异，配合预训练的AI模型就能准确识别实际渲染字体。可视化展示
将结果按DOM节点层级组织，用不同颜色标注各类字体使用情况。鼠标悬停时显示具体属性值，还加了字体使用占比的饼图。
开发中的关键技巧
字体匹配优化：
系统字体和WebFont共存时，浏览器可能优先使用系统字体。我的解决方案是临时移除@font-face规则强制重绘，再对比渲染差异。性能处理：
大页面可能包含上千个节点，改用requestIdleCallback分批处理避免卡顿。对于重复使用的字体定义，建立了缓存机制。边界情况：
处理了字体回退(font stack)、可变字体(variable fonts)、本地字体别名等特殊场景，确保检测结果准确。
实际应用场景
设计走查
自动生成字体使用清单，快速发现与设计规范不符的样式。曾帮团队揪出某处误用的Arial字体（设计要求是Roboto）性能优化
识别未使用的@font-face声明，减少不必要的字体加载。有个项目通过这个工具删除了3个未引用的字体文件，首屏加载快了1.2秒多语言支持
检测不同语言环境下字体回退情况，确保全球化页面的显示一致性
遇到的坑与解决方案
动态加载字体
某些SPA应用会异步加载字体，最初方案会漏检。后来改用MutationObserver监听font节点变化，触发重新检测。隐私限制
部分网站设置X-Frame-Options禁止iframe嵌入，改为通过服务端中转获取HTML快照。字体别名混淆
发现有些中文网站用"微软雅黑"和"Microsoft YaHei"混用，通过Unicode范围检测做了归一化处理。
这个工具最让我惊喜的是在InsCode(快马)平台上的部署体验。写完代码直接点"部署"，不用配nginx也不用管服务器，生成的链接发给设计师就能用。平台自带的AI辅助还能帮忙优化代码，有次提示我字体列表去重的更优实现，确实省心。
对于前端开发者来说，字体检测这种看似简单的需求，藏着不少技术细节。现在每次接手老项目，我都会先跑一遍这个工具，就像给网页做"CT扫描"，所有字体问题一目了然。如果你也想快速实现类似功能，推荐试试用AI辅助开发，真的能省下大量重复劳动。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个网页字体检测工具，能够自动分析指定URL页面的字体使用情况。功能包括：1.输入URL后自动爬取页面HTML和CSS 2.提取所有@font-face规则和内联字体样式 3.识别实际渲染字体（包括WebFont和系统字体）4.生成字体使用报告，包括字体名称、大小、颜色和行高等属性 5.可视化展示页面各区域的字体分布。使用JavaScript实现，输出为可交互的Web应用。- 点击'项目生成'按钮，等待项目生成完整后预览效果
