从页面源代码中我可以看到有两个对 fonts.googleapis.com 的引用
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />
但是在页面加载时，有很多 .woff2 文件从 http://fonts.gstatic.com/ 加载。
我想知道为什么会发生这种情况？
最佳答案
当您查看引用的 CSS 文件时，您将看到定义了多个字体。这就是 URL 所请求的内容。像 Open+Sans:400italic,600italic,700italic,300,400,600,700 这样的查询意味着，给我 Open Sans in
- 400 斜体
- 600 斜体
- 700 斜体
- 正常300
- 400正常
- 600 正常
- 700 正常
数字表示字体粗细。
因此，只有第一个 CSS 文件已升级为 7 种字体样式。
第二个 CSS 文件定义了几乎相同的字体。其中只有 3 个未包含在第一个文件中。这应该总共有 10 种不同的字体样式。
Open Sans 有很多可用的脚本扩展:
- 西里尔文扩展 (cyrillic-ext)
- 拉丁语(拉丁语)
- 希腊语扩展 (greek-ext)
- 希腊语(希腊语)
- 越南语(越南语)
- 拉丁语扩展 (latin-ext)
- 西里尔字母(西里尔字母)
为了涵盖所有这些组合，Google 创建了 font-style * script 字体定义，这会产生 70 个字体，每个字体都有不同的字体文件(对于 Google Chrome woff2)。
减少文件数量:
- 确保您需要所有这些字体样式。您真的需要所有这些不同的字体粗细吗？
- 您需要所有扩展吗？如果您永远不会显示越南语或西里尔字符，则无需加载这些字体。
两者都可以在 Use page of Open Sans 上单独选择.
关于google-font-api - 对 Google 字体 API 的许多请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30893022/