Chrome不支持“Arial Bold”字体族？

Question

在Chrome v75 Windows 10中，font-family: "Arial Black"可行，但font-family: "Arial Bold"不行。它们在Edge中都可以使用。我知道我仍然可以使用font-weight。但是我很难理解为什么Chrome不能使用Bold：其他以Bold结尾的字体也无法找到。

如上所述，我已安装所有变体。 "Arial Bold" 回退到 "broadway"。

http://jsfiddle.net/amts6ebq/1/

- colinfang

Answer 1

"Arial Bold"不是一个字体族。

"Arial"是一个字体族，"Bold"是一种字重。 Arial的粗体字重存储在名为"Arial Bold"的文件中，但这并不意味着它是一个单独的字体族。

你需要的是:

.example {
  font-family: "Arial";
  font-weight: bold;
}

<div class="example">Example</div>

- user149341

Answer 2

没错，“Arial Bold”不是一个字体族。你可以把责任归咎于微软。

使用font-weight声明是正确的答案，然而，有些用户可能会遇到我的情况。我在大量模板上使用sass，并且我们迄今为止编写了所有工作，以一种不能使用font-weight的方式应用字体重量。最近的一个设计要求使用Arial。当然，在许多地方我们也需要使用这种粗体字体。所以Arial对我们来说行不通。

解决方案是使用不同的字体。Arial实际上与Helvetica相同，因此您可以直接交换而无人知晓。您不能依赖用户在其系统上安装Helvetica，因此您需要提供Web字体。如果找不到要使用的Helvetica版本，则有许多类似的字体。您应该在线搜索Arial/Helvetica等效字体，但在2022年，我正在使用Roboto，它是一个很好的匹配，但它有点紧凑。Open Sans可能是一个可接受的替代品。

tldr; 艺术指导永远不应指定Arial字体 - 它不是真正的字体，而是Microsoft的免费版本Helvetica。相反，请使用Helvetica。

- changokun