@font-face：只使用一种字体权重不同的字体系列？答案

【问题标题】：@font-face: Only using one font-family with different font-weights?@font-face：只使用一种字体权重不同的字体系列？
【发布时间】：2015-02-27 18:47:32
【问题描述】：

我在我正在开发的网站上使用“Open Sans”字体。现在我正在使用 Google Web Fonts 来加载它，但是当它随机开始使用粗体 700 版本而不是普通的 400 时，我意识到这不是最可靠的方式（您可以在http://www.google.com/webfonts/specimen/Open+Sans 自行检查）。无论如何，我想更改为@font-face 并自己托管字体，但是有些东西我不明白。使用 Google Web Fonts，我可以对所有不同的权重使用相同的字体系列，所以我对 body 元素有这个规则：

font-family:'Open Sans', sans-serif;

以及特定元素的不同字体粗细，具体取决于它需要是浅色、普通还是粗体。但是对于由 Font Squirrel 生成的@font-faces，您似乎必须为每个不同的权重指定不同的字体系列，例如“OpenSansLight”、“OpenSansRegular”等。这是为什么呢？有没有办法改变它，所以我不必改变我的整个 CSS？

谢谢。

【问题讨论】：

标签： fonts font-face font-family google-webfonts

【解决方案1】：

当我们通过 cdn 加载谷歌字体时，它基本上会加载所有选定的字体选项（更轻、更粗、超粗）

如您所见，“source code pro”字体的所有字体粗细都已加载。

当您从 google 下载字体时。它为所有选定的选项提供不同的文件。这可能是为了减少加载不需要的字体（如果谷歌制作单一字体，那么与字体相关的所有字体粗细选项都必须放在单个文件中）。这会导致文件变大。

这就是单独加载文件的好处。但不是在名称“OpenSans Regular”下加载它，例如“OpenSans Bold”。您可以使用“Open Sans”并分配不同的字体粗细。（但在各自的字体权重上加载各自的文件）。

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro Font'),
       url('/fonts/sourcepro.woff2') format('woff2'), 
       url('/fonts/sourcepro.woff') format('woff'),
       url('/fonts/sourcepro.ttf') format('ttf'),
       url('/fonts/sourcepro.eot') format('eot');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 800;
  src: local('Source Code Pro bold'),
       url('/fonts/source-b.woff2') format('woff2'), 
       url('/fonts/source-b.woff') format('woff'),
       url('/fonts/source-b.ttf') format('ttf'),
       url('/fonts/source-b.eot') format('eot');
}

【讨论】：