即使 Arial 可用，浏览器仍在使用无衬线字体

Posted 2023-05-09

【中文标题】即使 Arial 可用，浏览器仍在使用无衬线字体

【英文标题】：The browser is using sans-serif even though Arial is available

【发布时间】：2016-10-29 02:07:32

【问题描述】：

我正在开发一个 Wordpress 网站，从控制台我可以看到菜单中文本的字体系列是 font-family: Arial, Helvetica, sans-serif;。

但是，它以无衬线而不是 Arial 呈现文本。这表明字体Arial在我的浏览器中不可用，但是当我在控制台中调整css并将font-family更改为font-family: Arial时，我看到Arial中的文本，我确信这是 Arial，因为我将它与我通过 Photoshop 制作的包含 Arial 文本的图像进行比较。

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

html 
  font-family: 'Arial';

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

This text should be Arial.
  <b>  Home Services Careers Feedback Privacy Policy Referral </b>
  <br>
  <span class="other">This text can be Arial sans-serif or Helvatica </span>
  <b class="other">  Home Services Careers Feedback Privacy Policy Referral </b>

【问题讨论】：

我怀疑有些事情不是你想的那样。也许你可以做一个minimal reproducible example？

@AlexanderO'Mara 我能够复制它并将其添加到问题中。

错字：font-family: 'Arial, Helvetica, sans-serif'; 您不引用列表，而是引用单个字体名称，但只有在名称本身有空格时才需要。 font-family: Arial, Helvetica, sans-serif; 工作正常。

@AlexanderO'Mara 实际上在修复它的小提琴中......所以我想这就是我需要通过在 wordpress 中硬编码来修改它。谢谢。

你们为什么要给我-s？

【参考方案1】：

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

正确的定义应该是：

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

请注意，字体名称用引号括起来，每个。字体类型不需要在引号中指定，它必须在列表中的最后，这样才不会弄乱你。

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

【讨论】：

不知道，但除非字体中有特殊字符，否则您不会引用字体系列名称，因此在这种情况下从技术上讲只是font-family: Arial, Helvetica, sans-serif。除非名称中有空格或非连字符，否则不要使用引号。

为了安全起见，如果他使用引号，他想解释 OP 应该如何进行。