CSS中后备字体重量

Question

我的字体样式表托管在fonts.com上，并且无法控制。在样式表上，Avenir的不同权重以不同的字体系列实现，每个家族的权重为400。如果重量不只是默认的normal(400(，则字体奇怪。那么，如何使我的后备字体大胆，同时保持主要字体重量为正常？

---

我试图通过使用font CSS速记来实现这一目标，以为我可以为每个逗号分隔的值定义不同的权重，例如：

font:   normal 400 18px 'Avenir 85 Heavy',
        normal 800 18px 'Calbri',
        normal 800 18px sans-serif;

但是，浏览器不识别此结构，不幸的是，除非我在后备上消除了<font-family>以外的所有属性。有任何建议，即使是不高的建议？

Answer 1

使用@font-face时，通常要应用其他字体变体(=不同的字体文件(，具体取决于您的字体是否为(1(normal，(2(italic，(3(bold或(4(italic bold。

如果您使用在您的@font-face定义中使用相同的font-family 为每个变体的名称及其相应的font-style和font-weight，则根据font-style和font-weight的定义，将自动选择正确的字体文件元素。

对@font-face定义的所有字体执行此操作，并且行为应如预期。

---

演示

@font-face {
  font-family : 'Droid Serif';
  font-style : normal;
  font-weight : 400;
  src: local('Droid Serif'),
       local('DroidSerif'),
       url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaI4P5ICox8Kq3LLUNMylGO4.woff2)
       format('woff2');
}
@font-face {
  font-family : 'Droid Serif';
  font-style : normal;
  font-weight : 700;
  src : local('Droid Serif Bold'),
        local('DroidSerif-Bold'),
        url(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwYlIZu-HDpmDIZMigmsroc4.woff2)
        format('woff2');
}
@font-face {
  font-family : 'Droid Serif';
  font-style : italic;
  font-weight : 400;
  src : local('Droid Serif Italic'),
        local('DroidSerif-Italic'),
        url(https://fonts.gstatic.com/s/droidserif/v6/cj2hUnSRBhwmSPr9kS5898u2Q0OS-KeTAWjgkS85mDg.woff2)
        format('woff2');
}
@font-face {
  font-family : 'Droid Serif';
  font-style : italic;
  font-weight : 700;
  src : local('Droid Serif Bold Italic'),
        local('DroidSerif-BoldItalic'),
        url(https://fonts.gstatic.com/s/droidserif/v6/c92rD_x0V1LslSFt3-QEpo9ObOXPY1wUIXqKtDjSdsY.woff2)
        format('woff2');
}
body {
  font-family : "Droid Serif", Georgia, serif;
}
.bold, .both {
  font-weight : 700;
}
.italics, .both {
  font-style : italic;
}

<h1>Title</h1>
<p>This is a paragraph with <b>some bold text</b>, <em>some text in italics </em> and <em><b>some text that is both bold and in italics</b></em>!</p>
<p>Depending on whether your text is <span class="bold">bold</span >, <span class="italics">in italics</span > or <span class="both">both</span >, a different font will be used for the same font family!</p>