Using @fontface fonts load italic

问题

I have css like so:

@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBold.ttf');
    font-weight:normal;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBoldItalic.ttf');
    font-weight:normal;
    font-style: italic, oblique;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlack.ttf');
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'alegreya';
    src:url('fonts/AlegreyaBlackItalic.ttf');
    font-weight:bold;
    font-style: italic, oblique;
}

And a rule for my class like this:

.font-alegreya {
    font-family:alegreya;
}

And finally HTML:

<li class="font-alegreya" data-styles="bold, italic, extrabold">
    Alegreya - Some sample words.
</li>

Now, I've read here on metaltoad and other places on SO that using a single font-family is the preferred way to utilize custom fonts and that you have to put bold-italic last.

The Problem is that the font is displayed italic. By using font-weight:normal in the css class, I get normal display weight, but font-style:normal doesn't clear the italics. This makes sense, since under (-webkit) "developer tools" in the "resources" tab, I only see the black-italic font loaded (second in my CSS file). The font is installed on my computer, but I renamed the file on the server.

I've observed this in opera (webkit) and IE11, so it's my code.

Edit: As mentioned in the comments, I had bold and black inverted. That accounts for the bold. But italic is still an issue.

回答1:

As David Stone's answer on the authoritative answer to @fontface questions states, this spec says that oblique, italic IS valid.

As he stated, FF 3.6 doesn't like the two values. Buried in the comments there are more reports of two-values not working.

On digging into the webkit bug reports, I discovered that the value for font-style as prescribed by the spec changed from CSS2 to CSS3. According the later css3 spec, only one value is allowed for the font-style property, rather than a comma-separated list.

So nowdays, if you pass in a comma-separated list, the rendering engine says "that's not a valid font-style. They must have meant normal." And overrides your previous normal declaration.

tl;dr: If font face is rendering all italic fonts:

font-style: italic, oblique;

should be

font-style: italic;

来源：https://stackoverflow.com/questions/28569842/using-fontface-fonts-load-italic

标签

css

fonts

font-face