@FONT-Face对于斜体/粗体字体不能正常工作

@font-face does not work properly for italic/bold fonts(@FONT-Face对于斜体/粗体字体不能正常工作)

问题描述

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

因此，我有两个问题

1. 为什么这不起作用，意思是为什么有font-style:italic会导致它不起作用？

2. 有没有办法"覆盖"@Font-Face定义以通过javascript使用font-style:normal？
   我问这个问题的原因是，我不能控制生成上面的css的工具，所以不能接触该文件。
   此外，我还尝试用相同的名称在Java脚本中创建一个新的@Font-Face，但我不想在index.html中再次指定"src"，因为该文件和css文件被进一步操作到不同的位置--所以我希望"src"只相对于css文件，并从那里被选取。

提前谢谢！

推荐答案

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

1. 如果选择将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;
}

2. 如果您选择通过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;
}

这篇关于@FONT-Face对于斜体/粗体字体不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！