Css 如何将多种字体样式组合到一个规则中？

多次使用

@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;
}

---

是否有更有效的方法编写此文档？即我可以组合样式吗？

替换每个字体系列：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;
}

---

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

设置完成后，如果应用字体系列：“roboto”，加上斜体和粗体，它将自动从“roboto BoldItalic.ttf”中获取字体文件

---

如果你想有一个更简短、更简单的方法来编写它，并且不想太在意字体的呈现，我建议你只使用“Roboto Regular.ttf”，单个字体文件就可以了。它仍然会响应css粗体和斜体，只是它不会像原始字体那样精确。

这是如何比以前更少的代码？事实上，它需要更多的代码。这根本不能回答我的问题。我更愿意保持字体样式的准确性，因此字体的字体规则必须保持原样。我要等一两天，看看还有没有人有什么想法；如果没有，我会接受你的回答。