如何设置具有多种样式的 Web 字体堆栈？

Question

Web 字体往往会拆分为单独的文件，用于粗体、斜体等。我正在使用像这样的 @font-face 声明（仅在本示例中缩减为 WOFF）：

@font-face {
    font-family: 'OpenSans';
    src: url("fonts/OpenSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansItalic';
    src: url("fonts/OpenSans-Italic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url("fonts/OpenSans-Bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

然后我实现了各种样式：

body {
    font-family: "OpenSans", Helvetica, sans-serif;
}

strong {
    font-family: "OpenSansBold", Helvetica, sans-serif;
    font-weight: normal; /* Web font is already bold */
}

em {
    font-family: "OpenSansItalic", Helvetica, sans-serif;
    font-style: normal; /* Web font is already italic */
}

我必须覆盖 UA 的粗体/斜体样式（上面的注释行）。否则，它会给文本添加一个非常难看的假粗体/斜体外观。

如果我这样保留它，并且其中一个 Web 字体文件无法加载，那么后备字体将没有正确的样式。例如，这个：

<strong>This text is bold</strong>

如果OpenSans-Bold.woff 加载失败，将显示为 Helvetica 常规，但我希望它是 Helvetica 粗体。

您如何确保您的后备字体获得正确的粗体/斜体/常规样式？

Answer 1

你想结合你的@font-face 规则.....只声明一个字体系列名称，并将权重声明为你的变量，如粗体、斜体等。下面的例子展示了如何使用 Open Sans常规与 Open Sans Bold：

@font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}

@font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}

如果你熟悉@font-face 规则，那么它就很简单了……上面两条规则的唯一区别是 url(s) 和字体粗细。所以对于斜体，将url改为指向斜体字体，然后将样式改为font-style:italic。

您可以从中获得很多好处，包括减少重写次数，因为您不必重新声明每种字体……您只需声明一次。

但这基本上将你的 css 简化为：

body{font-family:"OpenSans", Helvetica, sans-serif}
strong{font-weight:700}
em{font-style:italic}

然后只需构建一个更好的字体堆栈，以提供您想要的覆盖数量/级别。