无需登录 数据私有 本地保存

网页字体检测器 - 列出当前页面所有字体

开发工具 检测工具 字体 检测 网页
107
0
0
0
-
检测到字体
-
Web 字体
-
系统字体
-
扫描元素

正在扫描页面字体...

-
已安装字体
80
检测总数
-
中文字体
-
编程字体

点击"开始检测"按钮，检测您系统中安装的字体

使用Canvas渲染对比技术，检测约80种常见字体

常见问题与知识点

网页字体检测器是一款前端工具，能够自动扫描网页中使用的所有字体，并通过Canvas技术检测用户操作系统中已安装的字体。它帮助开发者、设计师和普通用户了解网页的字体使用情况，包括Web字体（通过@font-face或Google Fonts加载）和系统字体（用户设备上安装的字体）。

您可以通过以下几种方式查看网页字体：
1. 使用本工具：自动扫描并列出当前页面所有字体；
2. 浏览器开发者工具：在Elements面板中选择元素，查看Computed样式中的font-family；
3. 浏览器扩展：如WhatFont等扩展可以点击页面元素直接查看字体信息。本工具的"页面字体检测"功能会自动遍历所有DOM元素并汇总字体使用情况。

本工具使用Canvas渲染对比技术来检测系统字体：用目标字体和基准字体分别渲染相同的测试文本，比较两者宽度。如果宽度不同，说明目标字体已安装在系统中。这种纯前端的方法无需安装任何软件，安全可靠。切换到"系统字体检测"标签页，点击"开始检测"即可查看您设备上安装的字体列表。

Web字体：通过CSS的@font-face规则或第三方服务（如Google Fonts、Adobe Fonts）从服务器加载的字体文件，用户在访问网页时临时下载。优点是设计师可以使用丰富的字体，缺点是会增加页面加载时间。
系统字体：用户操作系统（Windows/macOS/Linux）中预装的字体，如Arial、宋体、微软雅黑等。优点是加载速度快（无需下载），缺点是不同系统的字体库不同，可能导致页面在不同设备上显示效果不一致。

字体直接影响网页的可读性、品牌形象和用户体验。合适的字体能提升内容的理解效率，增强品牌识别度。同时，字体加载性能也影响页面速度和Core Web Vitals指标。使用字体检测工具可以帮助您：优化字体加载策略、排查字体回退问题、确保跨平台字体一致性。

字体栈是CSS font-family属性中的字体列表，按优先级排列。浏览器会从左到右尝试每个字体，使用第一个可用的字体。例如：font-family: "Inter", -apple-system, "Segoe UI", sans-serif; 表示优先使用Inter字体，如果不可用则使用系统默认字体。合理的字体栈设计能确保在不同平台上都有良好的显示效果。

Canvas字体检测利用了一个巧妙的原理：当使用ctx.measureText()测量文本宽度时，如果指定的字体已安装，浏览器会使用该字体渲染（测量）文本；如果未安装，浏览器会回退到默认字体。通过比较目标字体和基准字体（如serif）渲染相同文本的宽度差异，可以判断目标字体是否可用。这种方法纯前端实现，无需任何权限。
🔧 相关工具