@font-face不适用于斜体/粗体字体

Question

我在用一个工具自动生成CSS，它生成下面的@font-face标签和对应的段落Style

@font-face {
    font-family:FF-Garamond-Italic;
    src:url("../fonts/16309_GARAIT (1).ttf");
    font-style:italic;
}

p.autoParaStyle3 {
    font-family:FF-Garamond-Italic;
    font-size:32px;
    line-height:40px;
    color:#000;
    text-align:justify;
}

注意，指定的字体已经是Garamond字体的斜体版本，从技术上来说,< code>font-style:italic行是多余的。

然而，这并不奏效(我在FF、Chrome

所以，我有2个问题

>

为什么这不起作用，也就是说，为什么使用font-style:italic会导致它不起作用？

有没有办法通过javascript“覆盖”@font face定义来使用font-style:normal
我询问的原因是，我无法控制上面生成CSS的工具，因此无法访问该文件
此外，我尝试用javascript创建一个同名的新@font face，但我不想在索引中再次指定“src”。html，因为这个文件和css文件被进一步操作到不同的位置，所以我希望“src”只与css文件相关，并从中选取。

提前感谢！

Answer 1

对于使用Create React App的用户，font-face可能会根据入口点给出不同的结果。这就是我注意到的：

< li >如果您选择将< code>css文件直接链接到您的< code>public/index.html，则您可以正常使用< code>font-face与一个< code>font-family和不同的< code>font-style:

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
  font-style: normal;
}
.text-italic {
  font-family: FontName;
  font-style: italic;
}

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic";
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

/* Usage */
.text {
  font-family: FontName;
}
.text-italic {
  font-family: FontNameItalic;
}

Answer 2

设置font-style:italic不是多余的。它指定字体为斜体，这意味着当元素的字体设置为斜体时，它将被视为匹配，默认情况下，例如对于i和引用elements。

因此，问题1的答案是p元素默认为其声明了常规（普通）字体，因此将使用常规字体（此处为浏览器的默认字体）。

要解决此问题，请将font-style:italic添加到p.autoParaStyle3>的规则中。

问题2的答案是，这取决于@font-face规则在DOM中的位置。例如，如果它位于style元素中，则可以使用JavaScript修改该元素的内容。然而，你不应该问这个问题。

（用斜体字显示整个段落在印刷上是有问题的。你可能解决了错误的问题。）