Question

有没有办法指定在Avenir Next这样的字体中使用哪种粗体或斜体变体？

这是一个例子。默认情况下，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>

Answer 1

CSS不允许你为同一字体的不同权重更改font-family，除非你开始提供自己的字体文件，这对于更好看的粗体来说是很多工作......

但是，如果您可以避免使用内联样式，而是使用<strong>标记来标记粗体文本，那么您将能够获得所需的确切结果，并拥有更清晰的HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

解决方案是使用@ 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>

使用CSS选择Avenir Next粗体变体（更新10.10.2）

2 个答案: