1

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

谢谢你。

4

1 回答 1

0

当我们通过 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');
}

于 2015-02-27T10:47:32.190 回答