Fonts @字体：仅使用一个字体系列，字体权重不同？

我在一个网站上使用“OpenSans”字体。现在我正在使用谷歌网页字体来加载它，但当它随机开始使用粗体700而不是普通400时，我意识到这不是最可靠的方式（你可以在网站上自己检查）。不管怎样，我想改成@font-face并自己主持这个字体，但是有些事情我不明白。使用Google Web字体，我可以对所有不同的权重使用相同的字体系列，因此我对body元素有以下规则：

字体系列：'opensans'，Sans serif

不同的字体在特定的元素上有不同的权重，这取决于它需要是轻的、普通的还是粗体的。但对于font Squirrel生成的@font faces，似乎必须为每个不同的权重指定不同的字体系列，例如“OpenSansLight”、“OpenSansRegular”等。这是为什么？有没有办法改变这一点，使我不必改变我的整个CSS

---

谢谢。

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

正如您所看到的，“SourceCodePro”字体的所有字体重量都已加载

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

这就是为什么最好单独加载文件。但是，您可以使用“OpenSans”并指定不同的字体权重，而不是将其加载到“OpenSans Regular”、“OpenSans Bold”等名称下。（但在各自的字体权重上加载各自的文件）

@font-face{
字体系列：“源代码Pro”；
字体风格：普通；
字体大小：400；
src:local（'sourcecode-Pro-Font'），
url（'/fonts/sourcepro.woff2'）格式（'woff2'），
url（'/fonts/sourcepro.woff'）格式（'woff'），
url（'/fonts/sourcepro.ttf'）格式（'ttf'），
url（'/fonts/sourcepro.eot'）格式（'eot'）；
}
@字体{
字体系列：“源代码Pro”；
字体风格：普通；
字号：800；
src:local（'sourcecode Pro bold'），
url（'/fonts/source-b.woff2'）格式（'woff2'），
url（'/fonts/source-b.woff'）格式（'woff'），
url（'/fonts/source-b.ttf'）格式（'ttf'），
url（'/fonts/source-b.eot'）格式（'eot'）；
}