即使Arial可用，浏览器仍在使用sans-serif

Question

我正在使用Wordpress网站，从控制台我可以看到菜单中文字的字体系列为font-family: Arial, Helvetica, sans-serif;。

然而，它使用sans-serif而不是Arial呈现文本。这表明，我的浏览器中没有字体Arial，但是当我在控制台中调整css并将font-family更改为font-family: Arial时，我会看到{{1}中的文字我确信它是Arial，因为我将它与我通过包含Arial文本的Photoshop所做的图像进行比较。

为什么我的浏览器不渲染Arial，即使它是第一个选项而是渲染sans-serif？

Arial

html {
  font-family: 'Arial';
}
.other{
  font-family: 'Arial, Helvetica, sans-serif';
}

Answer 1

是的，因为你已经在单引号中添加了所有内容。浏览器尝试搜索'Arial, Helvetica, sans-serif'，但不存在具有此类名称的字体，因此它将恢复为默认值，通常为"Times New Roman", "Times", serif，忽略您之前为文档指定的内容。

正确的定义应该是：

.other{
    font-family: "Arial", "Helvetica", sans-serif;
}

请注意，字体名称是引号，每个。字体类型不需要在引号中指定，它必须是列表中的最后一个，所以它不会搞砸你。

浏览器按照您指定的顺序查找字体，并应用它首先找到的字体。如果没有找到特定的字体，并且指定了字体类型，浏览器将从访问者的系统中选择一个。