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

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

替换每个字体系列：roboto；打字。

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

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

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

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

Answer 2

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

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

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

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

How can I combine multiple styles of fonts into one rule?

css

fonts

font-face