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

Question

我正在使用在外部css文件中使用@ font-face声明的web字体。设置字体服务，以便我获取外部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声明。根据{{​​3}} @font-face要求font-family和src描述符或声明无效。此外，描述符仅限于：

• 字体家庭
• SRC
• Unicode的范围
• 字体变量
• 字体特征的设置
• 字体拉伸
• 字体重量
• 字体风格

所以无论如何你都无法使用webkit-font-smoothing或moz-osx-font-smoothing。

我建议使用像current W3C recommendation for fonts (3 Oct 2013)，Sass或Less这样的CSS预处理器来减少CSS的冗长。但是，如果你不能使用那些，那么你必须像现在一样继续编写你的CSS声明。

Answer 2

我建议使用LESS mixins。来自lesscss.org：

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set.

例如，你可以写：

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

将mixin添加到要应用字体的位置：

h2{
    .knockout;
}

<强> More on mixins

Answer 3

实际上，我遇到了同样的问题，因为@font-face声明是在我无法控制的外部CSS文件中进行的。

我还尝试覆盖@ font-face声明，但是它不起作用。

因此，对于我而言，解决方案实际上是在外部CSS文件中声明@font-face 之前。然后，浏览器将使用我的@font-face声明，而忽略外部文件中的那个声明。