@ font-face：只能使用一种不同字体的字体系列？ [英] @font-face: Only using one font-family with different font-weights?

问题描述

我使用字体Open Sans作为我正在处理的网站。现在我正在使用Google Web Fonts来加载它，但是我意识到这并不是最可靠的方式，因为它随机开始使用粗体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？

谢谢。

解决方案

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

正如你所见加载了源代码专业版字体的所有字体权重。

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

这就是为什么单独加载文件的原因。但不是在名称OpenSans Regular，OpenSans Bold下加载。你可以使用Open Sans并分配不同的字体权重。 （但加载各自的字体权重文件）。

我们可以使用下面的代码来实现这个功能： face {font-family：'Source Code Pro'; font-style：normal; font-weight：400; src：local（'Source Code Pro Font'），url（'/ fonts / sourcepro.woff2'）格式（'woff2'），url（'/ fonts / sourcepro.woff'）格式（'woff'），url '/fonts/sourcepro.ttf'）格式（'ttf'），url（'/ fonts / sourcepro.eot'）格式（'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'）格式（'woff2'），url（'/ fonts / source-b.woff'）格式（'woff' ），url（'/ fonts / source-b.ttf'）格式（'ttf'），url（'/ fonts / source-b.eot'）format（'eot'）;}

I use the font "Open Sans" for a website I'm working on. Right now I'm using Google Web Fonts to load it but I realized it's not the most reliable way when it randomly began to use the bold 700 version instead of normal 400 (you can check by yourself at http://www.google.com/webfonts/specimen/Open+Sans). Anyways, I would like to change to @font-face and host the font myself, however there's something I don't understand. With Google Web Fonts I'm able to use the same font-family for all the different weights, so I just have this rule to the body element:

font-family:'Open Sans', sans-serif;

and different font-weights on specific elements depending on whether it needs to be light, normal, or bold. But with @font-faces generated by Font Squirrel, it seems you have to specify a different font-family for each different weight, such as 'OpenSansLight', 'OpenSansRegular', etc. Why is that? And is there a way to change that so I don't have to change my whole CSS?

Thank you.

解决方案

When we load google fonts via cdn it basically loads all the selected font options (lighter, bolder, extra bold)

As you can see all the font-weight for "source code pro" font is loaded.

When you download a font from google. It gives different files for all selected options. This is may be reduce unwanted fonts being loaded (if google makes a single font, then all font-weight options related to the font have to be put in the single file). This causes bigger file size.

This is why it is good to load the files individually. But instead of loading it under names 'OpenSans Regular', 'OpenSans Bold' for eg. you can use 'Open Sans' and assign different font-weights. (but load respective files on respective font-weights).

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

这篇关于@ font-face：只能使用一种不同字体的字体系列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！