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-family 名称，并在font-style定义中使用相应的font-weight和@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>

CSS中的后备字体权重

1 个答案:

演示