css - @ font-face规则在定义的CSS文件中可用还是在其他CSS文件和内联CSS代码中使用？ - Thinbug

@ font-face规则在定义的CSS文件中可用还是在其他CSS文件和内联CSS代码中使用？

时间：2018-12-29 09:35:02

标签： css font-face

我有一堆CSS文档，其中包含一些@font-face规则，我想检查这些@font-face，这些规则在HTML文档或网站中已使用，哪些未使用。因此，我应该检查定义的CSS文档中使用的@font-face还是HTML文档中带有内嵌样式标签的所有CSS文档？

问题是这个

文件名：style.css

@font-face {
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
    url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}

/* This tag can use the @font-face, because this .any-class rule in same CSS document */
.any-class {
    font-family: 'FontAwesome',
    font-weight: normal;
}

文件名：another-style.css

/* Can this CSS Class use the @font-face in style.css ? */
.any-other-class {
    font-family: 'FontAwesome',
    font-weight: normal;
}

文件名：index.html

<html>
<head>
    <link rel="stylesheet" href="style.css">
    <style>
        /* Can this .custom-class CSS Selector use @font-face in style.css ? */
        .custom-class {
            font-family: 'FontAwesome',
            font-weight: normal
        }
    </style>
</head>
<body>
    <!-- Can this DOM Element use @font-face in style.css? -->
    <p style="font-family: 'FontAwesome'; font-weight: normal;">Hello!</p>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

是的，只要您在要使用网络字体的任何位置（例如，使用link的方式。您的@font-face规则与任何其他CSS规则一样，不必与引用该CSS规则的CSS规则出现在同一样式表中，也不必出现在具有引用它的内联样式的任何HTML中。