Web字体并提供后备字体

Question

当使用web fonts使用@font-face我想知道什么是使用后备字体的推荐方法？

例如,如果我使用粗体的网络字体,例如:

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

现在当你打电话给你时,你显然只是这样做:

font-family: OpenSansBold;

但是我想知道提供后备字体,例如字体下载是否由于某种原因而失败.

显然,使用普通样式字体(非粗体/非斜体)很容易,如下所示.

font-family: OpenSansRegular, Arial;

但是,我想知道的是当字体是粗体还是斜体时.

它被建议这样的东西,它不会影响网络字体？

font-family: OpenSansBold, Arial;
font-weight: bold;

只是想知道,因为如果你没有指定粗体,那么如果网络字体失败,他们将获得Arial,但它不会是粗体.

Answer 1

您可能使用FontSquirrel生成的字体文件和CSS文件.他们的方法的问题是每个特定字体(例如Open Sans Regular和Open Sans Bold)表示为单独的字体系列,字体权重设置为normal.这意味着代替标记<p>foo <strong>bar</strong>和简单的CSS p { font-family: Open Sans, Arial }(让浏览器默认strong使用粗体字体并从Open Sans系列中选择合适的字体),您将被迫显式设置字体.这意味着使用font-family属性值隐式设置字体系列和字体粗细.

您需要调整CSS以获得更好的方法.您将在@font-family规则中使用相同的字体系列但权重不同,并且在font-family规则中,您只能设置系列:

@font-face {
    font-family: 'open_sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#OpenSans') format('svg');
    font-weight: bold;
    font-style: normal;
}   
@font-face {
    font-family: 'open_sans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#OpenSans') format('svg');
    font-weight: normal;
    font-style: normal;
}
* { font-family: open_sans, Arial; }

然后你只想用font-weight: bold(或HTML标记默认有这样的效果,比如strong,b,th,h1通过h6)对于应该出现在打开三世大胆的元素.

按照您描述的方式进行操作似乎也适用于大多数浏览器,但我不会指望它.一旦你将字体声明为正常重量,在该字体中@font-face设置font-weight: bold文本可能会导致a)失败,因为权重不匹配或b)字体作为算法粗体的起点,导致双重加粗.如果我没弄错的话,b)就是在Safari(Win 7)上发生的事情.

Answer 2

您已经正确地突出了网络字体"新时代"的问题,这篇博客文章讨论了它并提出了一种解决方法http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-字体/

相关代码段

第二个问题明显大于第一个问题.考虑FF Enzo,它没有400(甚至500)重量.在某些情况下,它的Light(300)重量可能对于小型体型来说有点太薄,所以让我们使用600重量来代替.啊,看起来还不错.

但这不好!因为如果无法显示该字体并且我们回退到其他内容,那么该后备字体将以600的权重呈现; 换句话说:大胆.

解决方法？

有一种解决方法,它是FontsLive在他们为用户生成的CSS中使用的方法:您单独声明每个权重而不是整个系列.他们的代码看起来有点像这样:

CSS代码:

{ font-family: 'FamilyName Light', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Medium', 'FallbackFamily', serif; font-weight: normal; }
{ font-family: 'FamilyName Bold', 'FallbackFamily', serif; font-weight: bold; }
{ font-family: 'FamilyName Black', 'FallbackFamily', serif; font-weight: bold; }

更新:

@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

然后像(你建议的那样):

{ font-family: OpenSansBold, 'Arial'; font-weight: bold; }