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

【问题标题】：Why do I have to declare specific bold/italic variants for web font?为什么我必须为网络字体声明特定的粗体/斜体变体？
【发布时间】：2012-03-03 20:17:25
【问题描述】：

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

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

【问题讨论】：

好吧，我不确定，但我也在使用字体生成器的 Windows 上使用自定义字体“SansationRegular”，如果我没有指定状态（样式、粗细）或指定粗细:bold 它变得很薄（看起来很正常）但是当我使用 font-weight:normal 时它变得有点粗体。

标签： css font-face webfonts

【解决方案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/

【讨论】：

优秀。和不错的文章。出于某种原因，我不知道您使用 @font-face 声明将字体名称设置为您想要的任何名称。我认为 Font Squirrel 应该更新他们的样式表，或者至少提供一个替代版本。
非常感谢您提供此信息；正是我想要的。