從外部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