Question

我的网站中包含多种字体，而且我不确定我是否正确行事。例如，我有字体＆＃39; Avenir medium＆＃39;和Avenir black＆＃39;。

我用这样的指南针包括它们：

@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，因此字体看起来不好看，但后备问题就是问题。如果我使用＆＃39; Avenir black＆＃39;，他的体重为400，但看起来像黑色，如果由于某种原因没有加载字体，那么＆＃39; Helvetica Neue＆＃39;或者＆＃39; Arial＆＃39;将显示，但也有400的重量，但实际上它应该是700的重量，但如果我把700，然后Avenir黑色将变得更大胆然后他应该。

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

Answer 1

一种称为字体链接的解决方案是在@ font-face声明上多次使用相同的font-family名称，并将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>标记以及正确的后备字体显示重量和样式。

如果您想阅读更多内容：SmashingMagazine - Setting Weights And Styles With The @font-face Declaration

Answer 2

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

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

多个webfonts +后备

2 个答案: