@font-face:只使用一个字体系列，不同的字体粗细？
我使用"Open Sans“字体作为我正在工作的网站。现在我正在使用Google Web字体加载它，但我意识到这不是最可靠的方法，因为它随机开始使用粗体的700版本，而不是普通的400版本(你可以在http://www.google.com/webfonts/specimen/Open+Sans上自己检查)。不管怎样，我想改成@ font -face，自己托管字体，但是有些事情我不明白。有了Google Web字体，我可以对所有不同的粗细使用相同的字体系列，所以我只需要对body元素使用以下规则：
font-family:'Open Sans'，sans-serif；
以及特定元素上的不同字体粗细，这取决于它是否需要是轻便、正常或粗体。但是使用Font Squirrel生成的@font-faces，似乎你必须为每个不同的粗细指定一个不同的字体系列，比如'OpenSansLight'，'OpenSansRegular‘等等。为什么呢？有没有办法改变这一点，使我不必改变我的整个CSS？
谢谢。
回答 1
Stack Overflow用户
发布于 2015-02-27 10:47:32
当我们通过cdn加载google字体时，它基本上加载了所有选定的字体选项(更亮、更粗、更粗)。
正如你所看到的，所有"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');
}
https://stackoverflow.com/questions/8107170
复制
腾讯云开发者
