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>这样的标记和像p { font-family: Open Sans, Arial }这样的简单CSS（让浏览器默认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）获取那些应该出现在Open Sans Bold中的元素。

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

Answer 2

您正确地突出了网络字体“新时代”的问题，此博客文章对其进行了讨论并提出了一种解决方法http://elliotjaystocks.com/blog/font-weight-in-the-age-of-web-fonts/

相关代码段

第二个问题明显大于第一个问题。考虑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; }

Answer 3

虽然可接受的答案有效，但是如果您想提供一种非常准确的后备字体，则还需要为每个后备定义单独的行高和字母间距。这样做的主要原因是Google最近在“累积布局转换（CLS）”中引入了一个得分，该得分指示了页面在加载后跳了多少。

您可以通过在加载字体之前将CSS类放在正文上来实现此目的，如果字体加载成功完成，则将CSS类删除。为此，请在页面顶部附近添加该标签：

<script>!function(d){if (d.fonts.ready){d.body.className="loading";d.fonts.ready.then(function(){d.body.className=""})}}(document)</script>

然后，您的CSS看起来像这样：

h1,p {font-family: Open Sans, Arial}
h1.loading {font-family: Arial;line-height:16px}
p.loading {font-family: Arial;line-height:12px}

通过在检查器中添加和删除“正在加载”类，然后可以使用CSS使其停止跳动。这样，您就可以可靠地将CLS设为零，以取悦Google之神。我发现的唯一替代方法是使用字体加载器库，这会增加加载时间。

Web字体并提供后备字体

3 个答案: