蒙特塞拉特和拉托的 Web 安全字体替代品答案

【问题标题】：Web Safe Fonts Alternatives to Montserrat and Lato蒙特塞拉特和拉托的 Web 安全字体替代品
【发布时间】：2021-07-20 08:08:33
【问题描述】：

一个网页设计公司为我设计的网站。但是，它主要使用 Google 字体 Montserrat 和 Lato，这导致当用户打开我的网站时，总共需要加载 40 个字体文件（约 1.4MB）。并且基于 GTMatrix，82% 的数据传输和 56.1% 的请求是针对字体文件的，这大大降低了我的网站速度。

因此，我想找一些网络安全的字体来代替 Montserrat 和 Lato，这样：

替换字体应与原始字体相似。
大多数访问者的系统都应该提供替换字体。
最好使用字体堆栈，以便在访问者系统上没有这些新字体时会有备用字体。

这样，当用户访问我的网站时，浏览器不需要加载额外的字体。

所以，首先，我尝试找到类似于 Montserrat 和 Lato 的字体，我使用以下网站：

http://www.identifont.com/

它确实带来了 30 种类似于蒙特塞拉特的字体。我称之为A组。

根据以下参考资料，没有标准的网络安全字体列表：

我使用的是https://www.w3schools.com/cssref/css_websafe_fonts.asp 的列表，这个列表看起来不错。我称之为B组。

现在我尝试使用 Excel 在集合 A 和 B 中查找字体。我什么也找不到。

所以我的问题是：

有没有更好的方法来找到给定字体的网络安全字体替代品？
由于A组和B组都没有出现字体，我打算用眼睛手动检查相似的字体，不知道有没有更简单的方法？

【问题讨论】：

一种选择是使用Font Squirrel 压缩您的网络字体，然后自己托管它们。例如。从 Google 下载您需要的 Lato 和 Montserrat 变体，然后使用 Font Squirrel 以更小的文件大小生成优化的网络字体。确实没有任何网络安全的后备方案看起来与这些字体中的任何一种都令人信服。最接近的是 Arial、Verdana 和 Trebuchet...
...我是一名设计师，就个人而言，我不喜欢那些使用系统特定 UI 字体的长字体堆栈链。这些中的每一个都已经是一种妥协，所以我会保持简单并做这样的事情，例如：font-family: 'Montserrat-optimized', Monserrat, Verdana, sans-serif;（其中第一个 Montserrat 是由 Font Squirrel 生成的网络字体，第二个是本地参考，以防万一用户碰巧将它安装在他们的系统上）。如果你走这条路，你需要用@font-face定义你的自定义字体。

标签： css fonts web-safe-fonts

【解决方案1】：

“网络安全”字体列表是 really small，没有一个看起来像 Montserrat 或 Lato。

我建议您坚持使用设计师选择的字体。您不必加载所有权重（也许只是常规？），您可以自己托管它们并使用font-display: swap;，因此对加载时间的影响最小化。如果这仍然不能接受，您将不得不选择 Arial 或 Verdana 之类的东西来作为适用于 Mac 和 Windows 的无衬线字体。

【讨论】：

【解决方案2】：

您可能不需要完全更改字体，但您应该只加载您在网站上使用的字体样式和粗细，而不是加载所有粗细和样式。例如，如果您在 Lato 中仅使用 400 和 700 粗细，请取消选中 Google 字体中的所有其他粗细。

您还可以查看字体加载器来帮助解决这些初始加载时间，例如：https://github.com/typekit/webfontloader

【讨论】：

【解决方案3】：

在开发过程中，在客户同意字体之前，我使用 Google Fonts 提供的外部嵌入链接。这与 CSS 中用于字体声明的 SASS 变量相结合，可以在必要时轻松更改项目范围内的字体。

在一切都获得批准后，作为让网站上线的最终过程的一部分，我将调查那些外部嵌入并下载实际的 .woff2 文件（以及相关的 CSS）并将它们添加到我自己的网站文件中。这减少了网站对外部链接的依赖，并使整个项目更加独立。

我刚刚检查了我目前正在进行的项目（它使用了三种不同粗细的字体）。所有字体文件的总和仅加起来约为 160k - 远不及您引用的 1.4mb。在这种大小下，考虑到现代网络速度和浏览器缓存，我认为使用网络字体没有问题。

我的建议是优化您的网站获取您想要使用的字体的方式，而不是寻找基于系统的替代方案。如果您对自己进行优化工作感到不自在，我会与开发人员联系并要求他们解决问题。

【讨论】：