如何使用 Chrome 调试器与 @font-face 定义进行交互？

Posted 2023-03-07

【中文标题】如何使用 Chrome 调试器与 @font-face 定义进行交互？

【英文标题】：How do I interact with @font-face definitions using the Chrome debugger?

【发布时间】：2012-07-04 10:40:17

【问题描述】：

使用 CSS 时，我非常喜欢能够使用 Web 检查器添加新规则并以交互方式编辑现有规则。但是，我不知道如何使用 @font-face 规则

在哪里可以查看我的样式表中的@font-face 规则是否被识别并生效？

例如，如果我有一个带有“div.foo”选择器的规则，那么我所要做的就是检查页面上具有类 foo 的任何 div，以便查看规则生效并实时编辑它的价值。

如何以交互方式添加新的@font-face 规则？

每当我尝试通过“新样式规则”按钮（带有 + 符号的那个）添加一个时，Chrome 就会崩溃。它与选择器上奇怪的“@”有关吗？ “@”到底是什么意思？

我正在使用 Chrome 19，因为我最喜欢它的调试器，但如果这是唯一的可能性，我不介意使用其他浏览器。

【参考方案1】：

(1) 我不认为你可以。 @font-face 只是将新字体添加到可用字体集中。给定具有font-family: Foo 的元素，开发工具似乎没有提供有关字体来源的任何信息（无论是本地可用还是通过@font-face 规则下载）。您必须在页面样式表中手动搜索@font-face 规则，并记下哪些字体名称是“外部”的。 （您可以通过转到开发工具的“资源”选项卡并在搜索框中输入“@font-face”来做到这一点。）

顺便说一句，您可以通过转到开发工具中的“资源”选项卡并展开字体目录来查看网页可用的外部字体文件。此目录中的每个文件代表一个@font-face 规则。

(2) 您不能使用“新样式规则”方法，因为@font-face 不是样式规则，而是 at 规则。为了在网页中添加@font-face 规则，请转到开发工具中的“资源”选项卡，在 Stylesheets 目录中选择样式表（.css 文件），然后复制粘贴@font-面规则到该样式表中。现在，您可以立即在 font-family 属性中开始使用新添加的字体名称。

【讨论】：

我想投反对票，因为我希望听到 YES :)