多种网络字体+后备答案

【问题标题】：Multiple webfonts + Fallback多种网络字体+后备
【发布时间】：2014-07-11 08:37:06
【问题描述】：

我的网站中包含多种字体，但我不确定我是否做得对。例如，我有字体“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，这样我就可以像这样轻松地添加它们：

@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会变得比他应该的更大胆。

任何建议，我做错了吗，还有其他方法吗？

【问题讨论】：

标签： css compass-sass webfonts

【解决方案1】：

一种称为字体链接的解决方案是在@font-face 声明中多次使用相同的字体系列名称，并将font-variant 和font-weight 设置为相应的值，例如在纯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> 标记，并带有正确显示粗细和样式的后备字体。

【讨论】：

【解决方案2】：

不幸的是，没有优雅的方法可以做到这一点，通常你能做到的最好的方法就是尝试找到在相同重量下看起来几乎相同的字体并将它们设置为备用。

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

【讨论】：

也许将字体合并到单个字体文件中会是解决方案？