Why do I have to declare specific bold/italic variants for web font?

问题

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?

回答1:

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;
}

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

h1{ font-family: 'Klavika';}

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/

来源：https://stackoverflow.com/questions/9243419/why-do-i-have-to-declare-specific-bold-italic-variants-for-web-font

标签

css

font-face

webfonts