网页安全字体-替代Montserrat和Lato的选择

Question

一家网页设计公司为我设计了网站。然而，他们主要使用了Google字体Montserrat和Lato，这导致当用户打开我的网站时加载了40个字体文件（约1.4MB）。根据GTMatrix的数据，82％的数据传输和56.1％的请求都是字体文件，这严重拖慢了我的网站速度。

因此，我想找一些网页安全字体来替代Montserrat和Lato，以便：

1. 替换字体应该看起来与原字体相似。
2. 替换字体应该在大多数访问者的系统中可用。
3. 最好使用字体堆叠，这样如果这些新字体在访问者的系统中不可用，就会有备选字体。

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

因此，首先我尝试寻找与Montserrat和Lato类似的字体，我使用了以下网站：

http://www.identifont.com/

它确实提供了30个类似于Montserrat的字体。我称其为A套装。

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

1. Web Safe fonts - What exactly does that mean?
2. https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts

我使用的是https://www.w3schools.com/cssref/css_websafe_fonts.asp上的列表，这个列表看起来很好。我称其为B套装。

现在我尝试用Excel在A和B两个套装中找到一个字体，但是什么都找不到。

所以我的问题是：

1. 有没有更好的方法来寻找与给定字体相似的网页安全字体替代品？

2. 由于集合A和B中没有相同的字体，我计划用肉眼手动检查相似的字体，不知道是否有更简便的方法？

- alancc

---

一个选择是使用Font Squirrel来压缩你的网络字体，然后自己托管它们。例如，从谷歌下载你需要的Lato和Montserrat变体，然后使用Font Squirrel生成优化的网络字体，文件大小要小得多。实际上没有任何网络安全备用字体看起来像这些字体中的任何一个。最接近的可能是Arial、Verdana和Trebuchet... - Aaron Sarnat

我是一名设计师，个人不喜欢使用特定于系统的UI字体的那些冗长的字体堆栈链。每一个都已经是一种妥协，所以我会保持简单，例如这样做：font-family: 'Montserrat-optimized', Monserrat, Verdana, sans-serif;（其中第一个Montserrat是由Font Squirrel生成的Web字体，第二个是本地引用，以防用户在其系统上安装了它）。如果您选择这条路线，您需要使用@font-face定义自定义字体。 - Aaron Sarnat

Answer 1

“Web safe”字体列表非常有限, 没有类似Montserrat或Lato的字体。

我建议您使用设计师挑选的字体。您不必加载全部字重 (也许只需要正常字重)，并且可以自行托管它们，使用font-display: swap;来最大程度地减少对加载时间的影响。如果这仍然不能接受，您需要选择类似Arial或Verdana的无衬线字体，以适用于Mac和Windows操作系统。”

- syntaxerror748

Answer 2

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

你也可以查看字体加载器以帮助减少初始加载时间，例如：https://github.com/typekit/webfontloader

- T. Bannister

Answer 3

在开发过程中，直到客户签署字体确认文件之前，我使用Google Fonts提供的外部嵌入链接。结合CSS中的SASS变量，这使得在必要时轻松更改项目中的字体。

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

我刚刚检查了我目前正在工作的项目（其中使用三种字体和各种权重）。所有的字体文件加起来只有大约160k，远远不到您引用的1.4MB大小。在这个大小下，考虑到现代网络速度和浏览器缓存，我认为使用Web字体没有问题。

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

- Djimmr