css - 为什么我必须为网络字体声明特定的粗体/斜体变体？

Question

我正在尝试在网站上使用 Ubuntu 字体。我正在使用 FontSquirrel @font-face 生成器。在安装了 Ubuntu 字体的计算机上，当我只使用像 font-family: Ubuntu 这样的 css 时，一切正常。但在其他计算机上它不会工作，除非我明确说明我想要哪种特定的字体，例如 font-family: UbuntuRegular 或 font-family: UbuntuBoldItalic。所有浏览器的情况都是一样的。

每次都必须声明重量和样式是很愚蠢的。有没有什么方法可以只声明通用字体系列并在需要时自动使用粗体和斜体？

Answer 1

大多数@font-face 生成器将 font-weight 和 font-style 设置为 normal 并为每个 weight/style 使用单独的声明以实现向后兼容性。但是您可以重写声明以对每个变体使用相同的系列名称，在适当的地方仅更改每个变体中的字体粗细和字体样式，例如:

@font-face { /* Regular */
font-family: 'Klavika';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-regular-webfont.woff') format('woff'),
     url('klavika-regular-webfont.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}

@font-face { /* Bold */
font-family: 'Klavika';
src: url('klavika-bold-webfont.eot');
src: url('klavika-bold-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-bold-webfont.woff') format('woff'),
     url('klavika-bold-webfont.ttf') format('truetype'),
font-weight: bold;
font-style: normal;
}

这样H1就应该继承粗体字重而不需要指定字重:

h1{ font-family: 'Klavika';}

456 Berea St 有一篇很好的帖子详细介绍了实现(和兼容性):http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/