从外部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描述符或声明无效。此外，该描述符不限于：

• 字体家庭
• SRC
• Unicode的范围
• 字体变形
• 字形特征的设置
• 字体拉伸
• font-weight
• font-style

因此无论如何您都无法使用webkit-font-smoothing或moz-osx-font-smoothing。

我推荐使用CSS预处理器，如Sass,Less或Stylus来减少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; 
} 

而且要应用的字体添加混入：

h2{ 
    .knockout; 
} 

More on mixins