Google Fonts 提供单个 woff2,但 webfonts-helper 和 github 提供数十个 woff2 文件

问题描述 投票:0回答:1

我希望在本地托管一些字体,我之前一直在 Google Fonts 中使用这些字体。 我注意到所有帮助文章都指向 google-webfonts-helper 但结果却截然不同。

使用 Google Fonts 时,会下载单个 woff2 文件,但使用替代方案时,会为每种字体粗细下载不同的 woff2 文件。 这对于性能/带宽来说并不是很好,我想减少发出的请求数量。

以 Montserrat 字体为例,看看 Google Fonts 的 CSS。

https://fonts.googleapis.com/css?family=蒙特塞拉特:300,400,500,600,700

注意拉丁语的所有权重如何指向同一个 woff2 文件。

src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');

google fonts css screenshot

但是,如果您访问 Google-Webfonts-Helper,请注意在下载的 zip 中,每个粗细都有一个 woff2。

google-webfonts-helper css example

此外,如果您访问源 Github 存储库,那里是相同的,每个权重有不同的文件。

montserrat github repo

Google Fonts 的做法与 google-webfonts-helper 和其他字体有何不同?

此外,下载 woff2 在本地使用而不是 google-webfonts-helper 提供的有什么害处吗?

css fonts google-font-api
1个回答
1
投票

如果他们提供一个具有多个权重的 woff2 文件,那么他们提供的是一种可变字体。

带有权重轴的可变字体包含一个权重的字形轮廓以及描述每个字形的轮廓控制点如何随其他权重变化的增量数据。这样,单个可变字体就可以支持多种不同的粗细——事实上,是连续范围的粗细。

如果您查看 GitHub 中的 Montserat 存储库,您会发现您可以获得一个变量(两个,包括斜体),或者可以获得九种单独的非变量字体

© www.soinside.com 2019 - 2024. All rights reserved.