Question

我使用的是Google字体库中的Open Sans Font-Family，您只需使用它：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

它会一次导出所有字体，当你使用Open Sans作为Font-Family时，你可以简单地输入font-weight：XXX，它会自动使用正确的字体。

我直接下载了这些文件，因为我们现在必须在本地使用它们，但它为每种样式和重量提供了10种不同的字体（正常，中等，粗体，粗体斜体等）。我不想单独导入它们并使用font-family：Open-Sans-Bold（例如）

有没有办法一次性导入它们或告诉CSS它基本上是相同的Font-Family只是一个不同的权重？

Answer 1

（请原谅我的Comic Sans neue的例子，这只是我所做的事情）

您必须单独添加它们，请查看以下代码。每个人都有不同的'font-weight'并且有一个新的字体文件（light，regular和bold）。

每个字体文件都有不同的字体大小，这意味着如果你想要添加所有字体，你必须以这种方式添加它们（对于你想要的每一个）。

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 100;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 300;
}

@font-face {
  font-family: 'Comic Neue';
  src: url('../fonts/ComicNeue-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/ComicNeue-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/ComicNeue-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/ComicNeue-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
  font-weight: 700;
}

在CSS中调用它很简单：

p {
    font-family: 'Comic Neue', sans-serif;
    font-weight: 300; /*or 100/700*/
}

显然，您可以使用Open Sans和Open Sans字体文件替换它。

CSS如何一次嵌入多个Font-Weights

1 个答案: