Web 浏览器如何从字体系列中选择字体？答案

【问题标题】：How does a web browser select a font from a font family?Web 浏览器如何从字体系列中选择字体？
【发布时间】：2020-05-20 14:15:17
【问题描述】：

我最近尝试帮助朋友解决网络浏览器中的字体问题，但发现以下问题：

在网页上（例如stackoverflow），字体样式规范包括字体系列列表中的Arial 字体。通过使用 Firefox 的检查元素功能并从 font-family 中删除 Arial 条目，视觉外观会发生变化。

令人费解的是，我在 GNU/Linux 操作系统上工作，但我没有从 Arial 字体系列中找到任何字体（使用 fc-list 和 locate 命令）。

如何确定要使用的字体？

问题也可能是：当计算机上没有以 Arial 命名的字体时，firefox 的“Arial”是什么字体？

【问题讨论】：

在 Firefox 上，如果您检查元素的样式（在“规则”选项卡中），请查找 font-family 声明（如果有）。使用的字体将带有下划线。此外，Firefox 也有一个字体选项卡，它会告诉您使用的字体以及页面上的所有其他字体用户。这由字体系列列表确定，具体取决于您的操作系统上可用的内容或加载的网络字体（使用@font-face）。
正确编码的网站有字体，然后是字体后备。如今，浏览器已经足够聪明，可以在指定字体不可用时回退到 fallback 字体。如果没有所需/指定的字体可用。浏览器将使用默认字体。
元素检查器中的“规则”选项卡就是我正在查看的内容。删除Arial改变了外观，删除其他字体没有效果，但我不知道Arial是从哪里来的。我的猜测是浏览器会回退到安装在我电脑上的不同字体。

【解决方案1】：

似乎 Firefox 将 Liberation Sans 字体包含在 Arial 字体系列中，如果在 css 中指定了 Arial，则很乐意使用这些字体。这是有道理的，因为字体被设计为相似。

【讨论】：

【解决方案2】：

您提供了指导，但您无法决定最终用户的浏览器使用什么，因为您无法确定您想要的字体是否已加载。最佳实践是逗号分隔的列表，如果请求的字体不可用，浏览器将从列表的开头尝试并回退到下一个，依此类推。像sans-serif 这样的通用选项作为后备的最后手段非常常见。

来自 MDN：

您应该始终在一个通用姓氏中包含至少一个通用姓氏 font-family 列表，因为不能保证任何给定的字体都是可用的。这使浏览器可以选择可接受的后备字体必要时。

【讨论】：