使用 CSS 时，我真的很喜欢能够使用 Web 检查器添加新规则并以交互方式编辑现有规则。但是，我不知道如何使用@font-face规则
在哪里可以查看样式表中的@font-face 规则是否已被识别并生效？
例如，如果我有一个带有“div.foo”选择器的规则，那么我所要做的就是检查页面上具有类 foo 的任何 div，以便查看规则生效并实时编辑其值。
如何以交互方式添加新的 @font-face 规则？
每当我尝试通过“新样式规则”按钮（带有 + 符号的那个）添加一个时，Chrome 就会崩溃。它与选择器上奇怪的“@”有关吗？无论如何，“@”是什么意思？
我正在使用 Chrome 19，因为我最喜欢它的调试器，但如果这是唯一的可能性，我不介意使用其他浏览器。
(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属性中开始使用新添加的字体名称。