css - 如何将多种字体样式合并为一条规则？

Question

多次使用@font-face规则，可以为不同样式的基础字体指定不同的字体文件。例如:

@font-face {
  font-family: myFont;
  src: url(myFont.ttf);
}

@font-face {
  font-family: myFont;
  src: url(myFontBold.ttf);
  font-weight: bold;
}

但是，当您为每种样式(粗体、斜体、粗斜体等)制定新规则时，会重复很多代码:

@font-face {
  font-family: roboto;
  src: url('fonts/roboto/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: roboto;
  src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: roboto;
  src: url(fonts/roboto/Roboto-Italic.ttf) format('truetype');
  font-style: italic;
}

@font-face {
  font-family: roboto;
  src: url(fonts/roboto/Roboto-BoldItalic.ttf) format('truetype');
  font-style: italic;
  font-weight: bold;
}

有没有更有效的方式来写这个？即我可以组合样式吗？

Answer 1

我不这么认为，据我所知，您的方法是在每种字体中指定每种样式的最佳方式。

设置完成后，如果您应用 font-family:'roboto'，使用斜体和粗体，它会自动从 'Roboto-BoldItalic.ttf' 中获取字体文件。

如果你想用更短、更简单的方式来编写它，而不是太在意字体显示，我建议你只应用'Roboto-Regular.ttf'，单个字体文件就可以了。它仍然会响应 css 粗体和斜体，只是它不会像原始字体那样准确。