使用CSS選擇Avenir下一個粗體變體（更新10.10.2）

是否有方法指定在Avenir Next等字體中使用哪種粗體或斜體變體？使用CSS選擇Avenir下一個粗體變體（更新10.10.2）

下面是一個例子。默認情況下，Avenir Next會選擇Avenir Next Bold，但我希望使用Avenir Next Demi Bold。 Here is fiddle.

<span style="font-family:'Avenir Next'"> 
    Normal 
    <!-- I want this to be AvenirNext-DemiBold. --> 
    <span style="font-weight:bold">Bold</span> 
</span>  
<br> 
<span style="font-family:'Avenir Next'">Normal</span> 
<span style="font-family:'AvenirNext-DemiBold'">Bold</span>

來源

2015-01-13 Berry Blue

看到http://stackoverflow.com/questions/19167571/packaging-multiple-weights-into-one-web-font，如果你需要了解如何避免更多信息「人造大膽」，這篇文章涵蓋了它：http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles – pixeline

不客氣。 – pixeline

CSS這麼想的，您可以更改字體家庭相同的字體的不同的權重，除非你開始提供自己的字體文件，這是很多工作，爲更好地尋找大膽...

但是，如果你能避免使用內聯樣式，而是使用<strong>標籤來標記粗體字，你就可以得到你想要的精確結果，並有清潔的HTML：

span { 
 
    font-family:'Avenir Next'; 
 
} 
 

 
strong { 
 
    font-weight: bold; 
 
    font-family: 'AvenirNext-DemiBold'; 
 
}

<span>Normal</span> 
 
<span><strong>Bold</strong></span> 
 
<br> 
 
<span style="font-family:'Avenir Next'">Normal</span> 
 
<span style="font-family:'AvenirNext-DemiBold'">Bold</span>

來源

2015-01-13 00:39:55 redlightbulb

這個解決方案的缺點是，如果有人決定一個不是「strong」的特定選擇器應該是粗體的，只需編寫'font-weight：bold'即可。 – pixeline

解決方案是使用@ font-face規則。

更新：在OS X 10.10.2上現在看起來已經崩潰了。

@font-face { 
 
    font-family: 'Avenir Next'; 
 
    src: local('AvenirNext-DemiBold'); 
 
    font-weight: bold; 
 
    font-style: normal; 
 
}

<span style="font-family:'Avenir Next'"> 
 
    Normal 
 
    <span style="font-weight:bold">Bold</span> 
 
</span>

來源

2015-01-13 00:48:22

一些學分本來不錯，因爲這是我的評論，實際上回答了你的問題。 – pixeline

沒有多少我可以做，但upvote你的評論，因爲你沒有寫出答案。這也是從你發佈的鏈接，它是「src：local（...）」，以選擇一個本地字體，這就是爲什麼我發佈這個答案也不是很明顯。 –

不幸的是，這在OS X 10.10.2上似乎已經破裂。 –

使用CSS選擇Avenir下一個粗體變體（更新10.10.2）

回答

相關問題