为什么我必须为网络字体声明特定的粗体/斜体变体? [英] Why do I have to declare specific bold/italic variants for web font?

问题描述

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

I'm trying to use the Ubuntu font on a website. I am using the FontSquirrel @font-face generator. On computers where the Ubuntu font is installed everything works fine when I simply have css like font-family: Ubuntu. But on other computers it won't work unless I explicitly state which particular variety I want like font-family: UbuntuRegular or font-family: UbuntuBoldItalic. It is the same situation across all browsers.

每次都要声明重量和样式是很愚蠢的.是否没有办法只声明通用字体系列，并在需要时自动使用粗体和斜体?

It is silly to have to declare weight and style every time. Isn't there some way to just declare the general font family and have the bold and italic faces used automatically when needed?

推荐答案

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

Most @font-face generators set font-weight and font-style to normal and use separate declarations for each weight/style for backward compatibility. But you can rewrite the declarations to use the same family name for each variation, changing only font-weight and font-style within each where appropriate, e.g.:

@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应该继承粗体重量而无需指定重量:

So that H1 should inherit the bold weight without the need to specify the weight:

h1{ font-family: 'Klavika';}

456 Berea St有一篇很好的文章，详细介绍了实现(和兼容性):

456 Berea St has a good post detailing the implementation (and compatibility): http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

这篇关于为什么我必须为网络字体声明特定的粗体/斜体变体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！