☰

如何识别我的浏览器用于呈现元素的特定字体文件？

tag-icon • tag-icon browser fonts html
如何识别我的浏览器用于呈现元素的特定字体文件？

是否可以识别我的浏览器用于呈现元素中的文本的特定字体文件？

背景故事是，一个网页（来自 Chrome 扩展程序）使用此样式（通过开发工具找到）呈现一个元素

{
    font-size: 22px;
    text-align: center;
    width: 100%;
    font-weight: 200;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

在 Helvetica 的轻薄渲染中看起来很糟糕，因为我没有安装 Helvetica Neue。我尝试通过安装 50 多个字体文件（*.ttf 和 *.otf）来解决这个问题，这些文件实现了 Helvetica Neue 的不同形式。其中一个文件修复了这个问题，但其他文件导致其他页面看起来很糟糕。

因此，我试图确定哪个特定的字体文件可以修复我最初遇到的单个问题，以便我可以删除其他字体文件，但由于字体文件太多，这很尴尬。因此我的问题是：有没有办法识别使用的字体文件？这是在 Windows 10 和 11 上，如果有任何影响的话。我可以使用相同的样式在简单的 HTML 文件中模拟元素，并在 Chrome 或 Edge 中显示，因此实际页面来自 Chrome 扩展程序这一事实与问题无关。如果我删除所有 otf 文件，文本看起来很糟糕，所以其中一个可以修复显示，但是哪一个呢？

答案1

Google Chrome 开发者工具提供您想要的所有信息，甚至是字形！

例如，让我们以 Font Awesome 的“房子”图标为例这里：

Font Awesome“房子”

F12如果我们在 Chrome 的开发者工具中（你可以使用或Ctrl+ Shift+I或汉堡菜单 → 更多工具 → 开发者工具来打开它）查看<i>元素的::before伪元素（其中 Font Awesome字体图标的位置），我们将看到以下内容：

Chrome 开发者工具计算样式标签

从“Computed”样式选项卡中，我们可以看到该元素中具体使用了哪些字体来呈现文本。在本例中，我们使用“Font Aweseome 6 Pro Light”中的一个字形来呈现房屋图标。

有一个小警告：此信息仅针对直接包含文本的元素显示。您无法选择整个文档并查看其中使用的所有字体。您必须选择具有文本节点。

利用这些信息，你甚至可以看到哪些字体取代如果指定的字体缺少字形。

相关内容