无法识别具有粗体的字体

Question

我在我的 index.css 文件上使用 2 @font-face，目的是在我的整个应用程序中使用常规粗细和粗体粗细的字体作为我的默认字体：

index.css 文件:

body {
    padding: 0px;
    margin:0px;
    font-family: "LucidaGrande";
}


@font-face {
  font-family: 'LucidaGrande';
  src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}

@font-face {
  font-family: 'LucidaGrande';
  font-weight: 900;
  src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}

现在，常规字重似乎适用于整个应用程序，但是，在我的应用程序的另一部分，我正尝试使用粗体字重的字体，如下所示：

#presentation-text em{
    font-size: 35px;
    color: rgb(139, 59, 28);
    font-style: normal; 
    font-weight: 900;
  }

但是 900 即 加粗权重 没有被应用，仍然是常规的。

我使用正确吗？

Answer 1

如果您使用 @font-face，从不使用 local(...)。您使用 @font-face 的全部原因是确保您控制 确切地 为哪个（组）加载哪个字体资源字体属性。您最不想看到的是 OS 黑盒获取 it 认为字体与您指定的名称对应的内容。即使它确实为某些用户找到了 Lucida Grande，也不能保证它与您在开发机器上安装的版本相同。

有趣的是，这实际上与这里的实际问题无关：你现在编写 CSS 的方式意味着，因为你在本地安装了字体，所以 local(...) 之后的任何内容都不会被浏览器查看，类似于您使用 font-family: serif, Times 时发生的情况。浏览器知道如何解决第一件事，所以它立即停止：它已经找到了它需要找到的东西。

实际上你当前的 CSS，运行在你自己机器上的浏览器中，就浏览器而言，这样说：

@font-face {
  font-family: 'LucidaGrande';
  src: local('LucidaGrande);
}

@font-face {
  font-family: 'LucidaGrande';
  font-weight: 900;
  src: local('LucidaGrande);
}

所以您在两个声明中加载了完全相同的内容。由于 CSS 浏览器中文本整形器的权重完全独立于系统文本引擎，结果正是您所看到的：两条规则都声明了 相同的字体资源 作为你说 font-family: LucidaGrande 时使用的那个，有或没有 font-weight: 900.

放下 local(...)，它将完全按照您的需要工作。

此外，您需要将那些 .ttf 文件转换为 WOFF2，然后加载它们，因为它们要小得多，并且向浏览器承诺这些确实是无阻碍的网络字体。

无法识别具有粗体的字体

font-face with bold weight not being recognized

css

fonts

reactjs