在使用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
属性中开始使用新添加的字体名称。