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的粗体/斜体样式（上面的注释行）。否则，它会为文本添加一个非常丑陋的虚假粗体/斜体外观。

如果我这样离开，并且其中一个网络字体文件无法加载，则后备字体将没有正确的样式。例如，这个：

<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）和font-weight。所以对于斜体，将URL更改为指向斜体字体，然后将样式更改为font-style:italic。

您可以从中获得许多好处，包括更少的重写，因为您不必重新声明每种字体...您只需要声明一次。

但这基本上会减少你的css：


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

然后简单地构建一个更好的字体堆栈，提供您想要的覆盖量/等级。

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

1 个答案: