Question

我正在使用工具生成自动CSS，并生成以下@ font-face标签和相应的段落样式

@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字体的斜体版本，从技术上讲，行font-style:italic是多余的。

然而，按原样，这不起作用（我在FF，Chrome和Safari中试过），最后使用默认的系统字体。如果我手动删除font-style:italic行，则文本会按照预期以Garamond Italic字体正确呈现。

所以，我有两个问题

为什么这不起作用，这意味着为什么让font-style:italic导致它不起作用？
有没有办法“覆盖”@ font-face定义以通过javascript使用font-style:normal？
我问的原因是我不控制上面生成CSS的工具，所以无法触摸该文件。
此外，我试图在javascript中创建一个具有相同名称的新@ font-face，但我不想在index.html中再次指定“src”，因为此文件和css文件被进一步操作为不同位置 - 所以我希望“src”只相对于css文件，并从那里挑选。

提前致谢！

Answer 1

设置font-style:italic不是多余的。它指定字体是斜体，这意味着当元素的字体设置为斜体时，它将被视为匹配，因为它默认为适用于i和cite元素。

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

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

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

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

Answer 2

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

如果您选择将 css 文件直接链接到您的 public/index.html，那么您可以正常使用 font-face 与一个 font-family 和不同的 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;
}

如果您选择通过 Js 链接 css 文件进行捆绑，那么您需要为所有 font-family 字体使用不同的 italic 并使用普通的 font-style。

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

@ font-face无法正常显示斜体/粗体字体

2 个答案: