Using @fontface fonts load italic

风格不统一 提交于 2021-01-27 05:49:22

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!