9

使用web fontsusing时，@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，但不会是粗体。

4

3 回答 3

12

您可能正在使用 FontSquirrel 生成的字体文件和 CSS 文件。他们的方法的问题在于，每种特定字体（例如 Open Sans Regular 和 Open Sans Bold）都表示为单独的字体系列，字体粗细设置为正常。这意味着您将被迫显式设置字体，而不是像标记<p>foo <strong>bar</strong>和简单的 CSS p { font-family: Open Sans, Arial }（让浏览器默认使用粗体字重并从 Open Sans 系列中选择合适的字体）。这意味着使用属性值strong隐式设置字体系列和字体粗细。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, h1through h6）用于应该出现在 Open Sans Bold 中的那些元素。

按照您描述的方式进行操作似乎也适用于大多数浏览器，但我不会指望它。一旦你在你@font-face的font-weight: bold.加粗。如果我没记错的话，b) 是在 Safari (Win 7) 上发生的。

于 2012-09-24T11:16:34.580 回答
8

您正确地强调了网络字体的“新时代”的问题，这篇博文讨论了它并提出了一种解决方法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; }
于 2012-09-24T10:03:09.267 回答
1

虽然接受的答案有效，但如果您想提供真正准确的后备字体，您还需要为每个后备定义单独的行高和字母间距。这样做的主要原因是谷歌最近引入了一个关于累积布局移位（CLS）的分数，表明页面在加载时跳转了多少。

您可以通过在字体加载之前在 body 上放置一个 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 之神。我发现的唯一替代方法是使用字体加载器库，它会减少加载时间。

于 2020-06-11T08:22:27.840 回答