CSS:为什么 Chrome(在 Linux 上)忽略我的字体系列？

Question

当我使用 Chrome 开发者工具检查我网站上的元素时，我看到以下元素是我的“计算”样式:

font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif

但如果我进一步向下滚动(到“计算”选项卡的底部)，我会看到:

Rendered Fonts
Liberation Sans—Local file(11 glyphs)

由于我的 (Linux) 操作系统必须有 Arial 和 sans-serif，我很困惑为什么 Chrome 会选择“解放” Sans”:它甚至不在我的 font-family 列表中。

我会责怪我自己糟糕的 CSS，但理论上“计算”选项卡显示我的规则的最终/处理版本，所以无论我的原始 CSS 多么糟糕，Chrome 都能清楚地看到我的 font-family 列表定义(并应用)到我的元素...它只是忽略它。

谁能解释这个谜团？

编辑: 我安装了一个字体检查程序，结果发现 Linux (Mint) 实际上没有 Arial 或 sans-serif 字体 ... 但即便如此，我认为浏览器(至少)提供了基本的 sans-serif 字体，无论操作系统是什么？这是不正确的吗？

Answer 1

您的字体堆栈指定 Arial。

出于许可原因，Arial 在大多数 Linux 系统上都不存在，它通常被称为 Liberation Sans，因为 Liberation Sans 与 Arial 具有相同的维度(指标)。然而，字体设计不同(这就是为什么 Liberation Sans 通常不是默认的 Linux sans serif 字体，它的设计并不流行)。

Helvetica 是另一种著名的传统字体名称，通常不存在。如果您尝试在字体堆栈中使用它，它通常会触发各种别名。它甚至可能在 Arial 之前触发 Liberation Sans 别名(因为 Arial 在 Windows 启动时是微软的穷人 Helvetica 替代品，并且具有大致相同的指标)。

(当您在 Windows 上创建指定 Helvetica 的 PDF 时，它通常会替代 ArialMT)。

如果您只指定 sans-serif，您将获得系统“最佳”sans-serif 字体，通常是干净的深受喜爱的设计，但它们的尺寸因系统而异。

由于许多损坏的网站的设计者假设所有系统都使用相同的字体，具有可以在页面设计中修复的相同像素宽度，字体替换通常首先在公制上完成，设计第二优先。

在所有客户端上获得相同字体的唯一方法是使用网络字体，但由于字体下载和用户(而非“设计师”)更喜欢快速页面，这会降低您的网站速度。 Web 字体需要小心许可和字体 unicode 覆盖范围，有安全意识的用户会阻止第三方下载，并且有很多关于晦涩的 Web 字体格式的 cargo 崇拜(现在大多数浏览器中 opentype 就足够了)。

那种认为 HelveticaNeue 是 alpha 和 omega 的 Apple 狂热者通常对 Open Sans 作为网络字体感到满意。

但即使使用网络字体，渲染也会略有不同，因为不同的系统使用不同的文本引擎，它们都有自己的特点，对于给定的引擎，某些字体比其他字体效果更好。