6

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 粗体。

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

4

1 回答 1

7

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


@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}

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

于 2013-06-08T22:59:39.167 回答