CSS：为什么 Chrome（在 Linux 上）忽略我的字体系列？答案

【问题标题】：CSS: Why Is Chrome (on Linux) Ignoring My Font-Family?CSS：为什么 Chrome（在 Linux 上）忽略我的字体系列？
【发布时间】：2019-08-18 22:21:42
【问题描述】：

当我使用 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 为何会选择“Liberation Sans”感到困惑：它甚至不在我的 @987654325 @列表。

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

谁能解释这个谜团？

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

【问题讨论】：

您确定您安装了 Arial 字体吗？你确定 Libertion Sans 没有在 Chrome 中设置为默认的无衬线字体吗？ Liberation Sans 附带了 RedHat 和其他 Linux 风格的标准……不难想象你的 Linux 浏览器会选择标准的 Linux sans-serif 字体。
我认为你是对的（见我的编辑）。但我认为浏览器提供了某些字体，所以你总是可以依赖（比如）sans-serif?
我认为sans-serif 实际上不是字体，而是要求浏览器提供 any 无衬线字体（即没有衬线的字体）。
这很有意义（并解释了我所看到的）。如果你们中的任何一个想以答案的形式给出答案（基本上“即使你的字体系列说sans-serif，浏览器也会告诉你它用来提供sans-serif的字体的名称；它不会其实说sans-serif)我会很乐意接受的。
另外，作为遇到此问题的任何 Linux 用户的附注，您可以安装一个包 (ttf-mscorefonts-installer) 以获得 Windows 用户认为理所当然的所有字体（例如 @987654336 @)。

标签： css font-family

【解决方案1】：

您的字体堆栈指定 Arial。

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

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

（当您在 Windows 上创建指定 Helvetica 的 PDF 时，它通常会替换 ArialMT）。

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

由于设计人员假设所有系统都使用相同的字体、可以在页面设计中固定的相同像素宽度的损坏网站的数量，字体替换通常首先根据公制进行，设计第二优先。

在所有客户端上获得相同字体的唯一方法是使用网络字体，但由于字体下载和用户（不是“设计师”）更喜欢快速页面，这会降低您的网站速度。网络字体需要注意许可和字体 unicode 覆盖，有安全意识的用户会阻止第三方下载，还有很多关于晦涩难懂的网络字体格式的货物崇拜（opentype 在当今大多数浏览器中就足够了）。

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

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

【讨论】：

【解决方案2】：

Chrome for Linux 中有两种字体回退机制。一种是操作系统级别的回退。另一种是 CSS 指定的后备。当 Chrome 询问您的操作系统中是否有 HelveticaNeue 时，操作系统级别的回退机制将 Liberation Sans 返回给 Chrome，而不是 none 或 not found。 Chrome 采用返回的 Liberation Sans 并认为操作系统返回了答案，因此忽略 CSS 后续字体后备列表。

【讨论】：

【解决方案3】：

我发现您的字体系列属性中同时包含 Helvetica 和 Arial。我猜想当 Helvetica 不可用时您想要 Arial...解决此问题的已回答问题是：two fonts

现在，如果我只想拥有一种字体系列，例如 Century Gothic，我会这样做：

font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;

这是一个很好的guide。

我的问题是，你为什么有这么多

【讨论】：

简短回答：我有一个设计师想要HelveticaNeue，但我们发现它是一种仅限 Mac 的字体，所以我在某个地方找到了该列表，该列表应该是 @987654325 的一个很好的后备集@。但不幸的是，您的回答并没有真正回答我的问题（请参阅 cmets 以获得进一步的说明；不过，谢谢）。

【解决方案4】：

因为谷歌浏览器，有些东西会从 url 中离开 WWW，您可以尝试手动放置。尤其是在 Unix 或 Mac 系统中。

【讨论】：

感谢您的建议，但我不确定它是否与我的问题相关。