2

我正在尝试在网站上使用 Ubuntu 字体。我正在使用 FontSquirrel @font-face 生成器。在安装了 Ubuntu 字体的计算机上，当我只拥有类似font-family: Ubuntu. 但在其他计算机上，除非我明确说明我想要哪种特定品种font-family: UbuntuRegular或font-family: UbuntuBoldItalic. 所有浏览器的情况都是一样的。

每次都必须声明重量和款式是愚蠢的。是否有某种方法可以仅声明一般字体系列并在需要时自动使用粗体和斜体？

4

1 回答 1

4

大多数@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/

于 2012-02-11T21:58:55.593 回答