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

【问题标题】：How can I combine multiple styles of fonts into one rule?如何将多种样式的字体组合到一个规则中？
【发布时间】：2016-02-04 16:24:02
【问题描述】：

多次使用@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;
}

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

【问题讨论】：

标签： css fonts font-face

【解决方案1】：

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

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

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

【讨论】：

我希望保持字体样式准确，因此字体规则必须保持原样。我要等一两天，看看有没有其他人有什么想法；如果没有，我会接受你的回答。

【解决方案2】：

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

【讨论】：

这个代码怎么比以前少了？事实上，它需要更多代码。这根本没有回答我的问题。