所有浏览器的字体系列在多大程度上是一致的？答案

【问题标题】：To what degree are font-families consistent across all browsers?所有浏览器的字体系列在多大程度上是一致的？
【发布时间】：2020-10-06 16:33:16
【问题描述】：

以下是否属实：

我将元素上的font-family 设置为无衬线字体。我的（Chrome）无衬线字体是 Helvetica。这个网页有可能在另一个具有可能不同操作系统的浏览器中打开时，将呈现不同的font-family，因为它的无衬线font-family可能与我的不同，例如凯尔布里
像 Helvetica 这样的字体系列是一个通用字体系列，在所有浏览器中呈现相同（尺寸）。

【问题讨论】：

1) 是的。 2) 不，您应该始终指定generic family 和，即使“Helvetica”得到匹配，也不能保证在所有地方都是相同的匹配。（实际上，很少会这样。）

标签： html css

【解决方案1】：

确保在所有浏览器中使用相同字体的最佳方法不是将font-family 设置为通用值（如sans-serif），而是在您的浏览器中使用@import 或<link rel="stylesheet" href="font.css" /> HTML 代码。在链接的href 部分和@import 之后，您可以放置字体的URL。例如，如果我想使用字体“Ubuntu”（也是 Linux 发行版的名称），并且该字体由 Google Fonts 提供，请执行以下操作：

CSS：

@import url(https://fonts.googleapis.com/css2?family=Ubuntu&display=swap)

HTML：

<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />

然后您可以在您的 CSS（对于“Ubuntu”字体）中执行以下操作：

font-family: "Ubuntu", sans-serif; /* It is always smart to add the type of font at the end. In this case, sans-serif */

这确保了所有读取 HTML 和 CSS 的浏览器都可以使用此字体，并且它不会因常见浏览器而异。

【讨论】：

谢谢@JasonD'Silva。我猜这是 Web 开发人员中最流行的技术？
@tonitone106 我是 Web 开发领域的学习者，我不能 100% 确定所有公司和开发人员都使用这种技术，就像许多流行网站（microsoft.com、google.com、 apple.com 等）不喜欢在其源代码中链接到其他网站。但最佳做法是为整个网站（包括所有页面）使用一种字体，以使用户界面保持一致。而且，在执行此操作时，最好下载字体样式，而不是链接到另一个网站（如 fonts.google.com）来获取它们，以防万一他们的服务器也意外停机。

【解决方案2】：

第一个是真的。实际上，无衬线字体是一大类字体。如果用户 (1) 在他们的计算机中没有您想要的字体，或者 (2) 用户在他们的浏览器设置中设置了他们的首选字体，那么字体将会不同。

第二个可能是真的，但一个极端的例子是，用户从他们的计算机中删除了 Helvetica 字体。避免该问题的一些方法是 (1) 设置备用字体，或 (2) 在线请求字体，例如 font.googleapis.com。

【讨论】：

不，第二个不是真的。即使是使用完全相同字体、相同操作系统、相同浏览器的用户，由于 GPU 差异、显示设置、缩放设置等原因，可能会看到不同的字体渲染。