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

Posted 2023-03-06

【中文标题】@font-face 不适用于斜体/粗体字体

【英文标题】：@font-face does not work properly for italic/bold fonts

【发布时间】：2014-07-07 01:03:37

【问题描述】：

我正在使用一个自动生成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 斜体字体正确呈现。

所以，我有两个问题

为什么这不起作用，这意味着为什么拥有font-style:italic 会导致它不起作用？

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

提前致谢！

【问题讨论】：

这是首选@font-face 设置的便捷指南：fontspring.com/support/installing_webfonts/style-linking 看看它是否对您有帮助。我会避免让 JS 参与其中。

【参考方案1】：

对于使用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 文件进行捆绑，那么您需要为所有 italic 字体设置不同的 font-family，并使用普通的 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;

【参考方案2】：

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

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

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

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

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