What is the difference between these two:
font-style:italic
font-style:oblique
I tried using the W3Schools editor but was unable to tell the difference.
What am I missing?
5 Answers
According to mozilla developer CSS tutorial :
italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
From here, we deduce that if an italic version of the font is not available, both italic and oblique behave the same way. Since the W3Schools code snippet does not specify any particular font-family, I believe a default font is used; a default font which probably does not have an italic version.
But how to make an italic version of the font available?
This means that we have at least two versions of the same font, a "regular" one, and an italic one. These can be specified in the <style> section with the @font-face rule. Please read briefly : developer.mozilla, w3schools, tympanus.net. As you can see, the font is loaded as a file, which can have the following extensions: eot, otf, woff, truetype.
So far, i found two ways of linking the font file
`@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url
(http://themes.googleusercontent.com/static/fonts/opensans/v8/
xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}`
Please notice that in both cases we have font-family: 'Open Sans', which basically defines the same font; but in the first case we have font-style: normal;, while in the second case we have font-style: italic;. Also note that the URLs point to different files. Now, going back to the w3schools code snippet, that's how the browser can distinguish between font-style: normal and font-style: italic
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`
In this case, the .eot files must be stored in the same folder as the html page. Again, notice that the font-family is the same, the font-style is different, and also the urls are different: Ubuntu-R-webfont vs Ubuntu-I-webfont.
Example of an italic version of the font:
ctan.org :this is an example of how there are provided different files for different styles/weights of the same font. Neither bold or italic are computed on the spot, they are retrieved from their specific file.
Related