在使用CSS时，我真的很喜欢使用Web检查器来添加新规则和交互式编辑现有规则。但是，我不知道如何使用@font-face规则
1.* * 在哪里可以查看样式表中的@font-face规则是否已被识别并正在生效？**
例如，如果我有一个带有"www.example.com"选择器的规则，那么我所要做的就是检查页面上具有类foo的任何div，以便看到规则生效并实时编辑其值。div.foo" selector then all I have to do is inspect any div on the page that has the class foo in order to see the rule taking effect and to live-edit its values.
1.* * 如何以交互方式添加新的@font-face规则？**
每当我试图通过"新样式规则"按钮（带+符号的那个）添加一个规则时，Chrome就会崩溃。这是因为选择器上奇怪的"@"吗？"@"到底是什么意思？
我使用Chrome 19是因为我最喜欢它的调试器，但如果这是唯一的可能性，我不介意使用另一种浏览器。
1条答案
按热度按时间4nkexdtk1#
**（1）**我认为你做不到。@font-face只是在可用字体集上添加了一个新字体。给定一个
font-family: Foo的元素，开发工具似乎不提供任何有关字体来源的信息（无论是本地提供还是通过@font-face规则下载）。您必须手动搜索@font-字体规则，并写下哪些字体名称是"外部的"（你可以通过进入开发工具的"资源"选项卡，在搜索框中输入"@font-face "来完成）。顺便说一句，你可以查看哪些外部字体文件可用于网页，方法是进入开发工具的"资源"标签，展开字体目录。该目录中的每个文件代表一个@font-face规则。
**（2）**您不能使用"新建样式规则"方法，因为@font-face不是样式规则，而是at规则。要在网页中添加@font-face规则，请在开发工具中的"资源"选项卡中选择样式表（. css文件），然后将@font-face规则复制粘贴到该样式表中。现在，你可以立即在你的
font-family属性中开始使用新添加的字体名称。