html - 使用 CSS 选择 Avenir Next 粗体变体(更新 10.10.2)

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 不允许您为相同字体的不同粗细更改字体系列，除非您开始提供自己的字体文件，这对于更好看的粗体来说需要大量工作...

但是，如果您可以避免使用内联样式，而是使用 <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>