粗体字体无法识别

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 的全部原因是确保您 控制准确 为哪个（一组）字体属性加载哪个字体资源。您想要的最后一件事是让操作系统黑盒获取 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，然后加载它们，因为它们要小得多，并且向浏览器承诺这些确实是不受阻碍的网络字体。