Question

多次使用@font-face规则，您可以为基本字体的不同样式指定不同的字体文件。 E.g：

@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：＆＃39; roboto＆＃39;，它会自动从＆＃39; Roboto-BoldItalic.ttf＆＃39;中获取字体文件。例如。

如果您想要更简单，更简单的方式来编写它而不打扰字体显示那么多，我建议您只需应用＆＃39; Roboto-Regular.ttf＆＃39;单个字体文件会做。它仍然会响应css粗体和斜体，只是它不会像原始字体那样准确。

Answer 2

替换每个font-family：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;
}

如何将多种字体组合成一个规则？

2 个答案: