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