css - 从外部 css 文件扩展 @font-face 声明

Question

我正在使用在外部 css 文件中用 @font-face 声明的网络字体。字体服务的设置使得我可以获取外部 css 文件，然后只使用我的 css 中的字体。我无法在我自己的@font-face 定义中获取字体文件本身。

每次我在我的网站上使用网络字体时，我都会向它添加相同的两个样式定义。所以，我的字体使用总是看起来像这样:

h2{
   font-family: 'Knockout 26 A';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

每次我使用该字体时都添加抗锯齿和灰度似乎不必要地多余。有没有办法在我自己的 css 中从外部文件扩展 @font-face 声明？

谢谢!

Answer 1

不可能扩展@font-face 声明。根据current W3C recommendation for fonts (3 Oct 2013) @font-face 需要 font-family 和 src 描述符，否则声明无效。此外，描述符仅限于:

• 字体系列
• 来源
• unicode 范围
• 字体变体
• 字体功能设置
• 字体拉伸(stretch)
• 字体粗细
• 字体样式

因此您将无法使用 webkit-font-smoothing 或 moz-osx-font-smoothing。

我建议使用像 Sass 这样的 CSS 预处理器, Less或 Stylus减少 CSS 的冗长。但是，如果您不能使用它们，则只能像现在一样继续编写 CSS 声明。