问题标签 [web-safe-fonts]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
1400 浏览

css - 蒙特塞拉特和拉托的 Web 安全字体替代品

一个网页设计公司为我设计的网站。但是,它主要使用 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集都没有出现字体,我打算用我的眼睛手动检查类似的字体,不知道是否有更简单的方法可以做到这一点?