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

在使用CSS时，我非常喜欢能够使用web inspector添加新规则并以交互方式编辑现有规则。然而，我不知道如何使用规则

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

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

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

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

我之所以使用Chrome 19，是因为我最喜欢它的调试器，但如果这是这里唯一的可能性，我不介意使用另一个浏览器。

（1）我认为你不能@字体面仅向可用字体集添加新字体。对于具有

字体系列：Foo

的元素，开发工具似乎没有提供有关字体来源的任何信息（无论是本地可用还是通过@font-face规则下载）。您必须在页面的样式表中手动搜索@font-face规则，并记下哪些字体名称是“外部的”。（您可以通过转到开发工具的“资源”选项卡，并在搜索框中键入“@font-face”来完成此操作。）

顺便说一句，您可以查看哪些外部字体文件可用于网页，方法是转到开发工具中的“资源”选项卡，然后展开字体目录。此目录中的每个文件代表一条@font-face规则

---

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

字体系列

属性中开始使用新添加的字体名称。

我想投票否决，因为我希望听到是：）