@font-face：仅使用一种具有不同字体粗细的字体系列？

Question

我在我正在开发的网站上使用“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？

谢谢。

Answer 1

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

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

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

这就是为什么最好单独加载文件的原因。但不是以“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');
}