多个webfonts字体+回退

Question

我有多个字体包括在我的网站，我不确定我是不是做得对。例如，我有字体'Avenir中等‘，和Avenir黑色’。

我把它们和指南针包括在一起：

@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会变得更大胆，然后他应该是。

有什么建议吗，我是不是做错了，还有别的办法吗？

Answer 1

一个名为字体链接的解决方案是在@字体面声明中多次使用相同的字体-家族名称，并将字体-变量和字体权重设置为相应的值，例如在普通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;
}

现在，您可以像任何其他字体一样使用，而不必担心伪粗体或斜体，支持<strong> <b> <i>和<em>标记，并使用正确显示权重和样式的回退字体。

如果你想读更多：SmashingMagazine -使用@字体-脸宣言设置权重和样式

Answer 2

不幸的是，没有优雅的方法来做到这一点，通常你能做的最好的，只是尝试找到那些看起来几乎相同的重量，并设置这些作为下坠。

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