首页 文章

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

提问于
浏览 次
1

我使用字体"Open Sans"用于使用Google Web Fonts加载它的网站但我意识到当它随机开始使用粗体700版本而不是普通400版本时，它不是最可靠的方式（你可以自己查看http://www.google.com/webfonts/specimen/Open+Sans） . 无论如何，我想改成@ font-face并自己托管字体，但是's something I don' t了解 . 使用Google Web Fonts，我可以对所有不同的权重使用相同的font-family，所以我只对body元素有这个规则：

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

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

谢谢 .

fonts font-face font-family google-webfonts

1 回答

  • 0

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

    enter image description here

    如您所见，加载了“源代码专业版”字体的所有字体粗细 .

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

    这就是为什么单独加载文件是好的 . 但不是用名称'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');
}
    回复于

相关问题