6

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

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

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

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

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

http://www.identifont.com/

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

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

  1. 网络安全字体 - 这到底是什么意思？
  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集都没有出现字体，我打算用我的眼睛手动检查类似的字体，不知道是否有更简单的方法可以做到这一点？

4

3 回答 3

2

“网络安全”字体列表非常小，没有一个看起来像 Montserrat 或 Lato。

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

于 2021-07-24T15:09:13.543 回答
1

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

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

于 2021-07-20T11:00:37.123 回答
0

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

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

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

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

于 2021-07-29T08:41:23.733 回答