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-weight和font-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/

为什么我必须为web字体声明特定的粗体/斜体变体？

1 个答案: