css - Web 字体和提供后备字体

Question

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

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

@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)都表示为单独的字体系列，字体粗细设置为正常。这意味着不是像 <p>foo <strong>bar</strong> 这样的标记和简单的 CSS，如 p { font-family: Open Sans, Arial } (让浏览器默认 strong 为粗体字重，并从 Open Sans 系列中选择合适的字体)，您将被迫明确设置字体。这意味着使用 font-family 隐式设置字体系列和字体粗细。属性(property)值(value)。

您需要调整 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) 上发生的情况。