Css 多个webfonts+；退路

我的网站中包含了多种字体，我不确定我是否做对了。 例如，我有字体“Avenir medium”和“Avenir black”

我用指南针将它们包括在内，如下所示：

@include font-face(
  'Avenir_black',
  font-files(
    'avenir-black.woff', woff,
    'avenir-black.svg', svg,
    'avenir-black.ttf', ttf),
    'avenir-black.eot'
);

@include font-face(
  'Avenir_medium',
  font-files(
    'avenir-medium.woff', woff,
    'avenir-medium.svg', svg,
    'avenir-medium.ttf', ttf),
    'avenir-medium.eot'
);

@mixin avenir( $family: 'medium', $size: $base-font-size, $weight: 400, $style: normal ) {

  font: {
    family: 'Avenir_#{$family}', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    style: $style;
    weight: $weight;
  }
  @include rem( font-size, $size );
}

然后我创建一个mixin，这样我就可以像这样轻松地添加它们：

@include font-face(
  'Avenir_black',
  font-files(
    'avenir-black.woff', woff,
    'avenir-black.svg', svg,
    'avenir-black.ttf', ttf),
    'avenir-black.eot'
);

@include font-face(
  'Avenir_medium',
  font-files(
    'avenir-medium.woff', woff,
    'avenir-medium.svg', svg,
    'avenir-medium.ttf', ttf),
    'avenir-medium.eot'
);

@mixin avenir( $family: 'medium', $size: $base-font-size, $weight: 400, $style: normal ) {

  font: {
    family: 'Avenir_#{$family}', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    style: $style;
    weight: $weight;
  }
  @include rem( font-size, $size );
}

用法：

@include avenir('black', 24px);

我这里的问题实际上是关于重量和回退字体。 默认情况下，权重为400，所以字体看起来不坏，但这是回退的问题。 如果我使用“Avenir black”，它的重量为400，但看起来像黑色，如果出于某种原因字体没有加载，那么会显示“Helvetica Neue”或“Arial”，但重量也为400，但实际上它的重量应该为700，但如果我使用700，那么Avenir black将比它应该的更粗体

---

有什么建议吗，我做错了吗？还有其他方法吗？

不幸的是，没有优雅的方法可以做到这一点，通常你能做的最好的方法就是找到看起来几乎相同、重量相同的字体，并将其设为后备字体

---

有一个名为的github项目，看起来很有希望，但我从未使用过它。

一个名为字体链接的解决方案是在@font-face声明中多次使用相同的字体系列名称，并将字体变量和字体权重设置为相应的值，例如在纯css中：

@font-face {
    font-family: 'charter';
    src: url('font/charter_bold_italic-webfont.eot');
    src: url('font/charter_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_bold_italic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_bold-webfont.eot');
    src: url('font/charter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_italic-webfont.eot');
    src: url('font/charter_italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'charter';
    src: url('font/charter_regular-webfont.eot');
    src: url('font/charter_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/charter_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

现在，您可以像任何其他字体一样使用，而不用担心假粗体或斜体，支持

和
标记，并支持正确显示权重和样式的回退字体

如果您想阅读更多内容：
将字体合并到单个字体文件可能是解决方案？