@ font-face：只使用一个字体不同的font-family？

Question

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

font-family：'Open Sans'，sans-serif;

和特定元素的不同字体权重取决于它是否需要是浅色，普通色还是粗体色。但是使用Font Squirrel生成的@ font-faces，似乎你必须为每个不同的权重指定不同的字体系列，例如'OpenSansLight'，'OpenSansRegular'等等。为什么会这样？有没有办法改变它，所以我不必改变我的整个CSS？

谢谢。

Answer 1

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

你可以看到＆＃34;源代码专业版的所有字体权重＆＃34;字体已加载。

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

这就是为什么单独加载文件是好的。但不是将其加载到名称“OpenSans Regular＆＃39;，＆＃39; OpenSans Bold＆＃39;例如。你可以使用＆＃39; Open Sans＆＃39;并指定不同的字体权重。 （但在相应的字体权重上加载相应的文件）。

＆＃13;

＆＃13;

@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');
}

＆＃13;

＆＃13;

＆＃13;