De acordo com o tutorial de CSS do desenvolvedor do mozilla :
itálico: define o texto para usar a versão em itálico da fonte, se disponível ; se não estiver disponível, simulará o itálico com oblíquo.
oblíquo: define o texto para usar uma versão simulada de uma fonte em itálico, criada inclinando a versão normal.
A partir daqui, deduzimos que, se uma versão em itálico da fonte não estiver disponível , itálico e oblíquo se comportam da mesma maneira. Como o snippet de código do W3Schools não especifica nenhum particular font-family, acredito que uma fonte padrão seja usada; uma fonte padrão que provavelmente não possui uma versão em itálico.
Mas como disponibilizar uma versão em itálico da fonte?
Isso significa que temos pelo menos duas versões da mesma fonte, uma "regular" e uma em itálico. Eles podem ser especificados na <style>seção com a @font-faceregra. Leia brevemente: developer.mozilla , w3schools , tympanus.net . Como você pode ver, a fonte é carregado como um arquivo, que pode ter as seguintes extensões: eot, otf, woff, truetype.
Até agora, encontrei duas maneiras de vincular o arquivo de fonte
URL absoluto do arquivo de fonte: (trecho de código de tympanus.net )
`@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');
}`
Observe que nos dois casos temos font-family: 'Open Sans', que basicamente define a mesma fonte; mas no primeiro caso, temos font-style: normal;, enquanto no segundo caso, temos font-style: italic;. Observe também que os URLs apontam para arquivos diferentes. Agora, voltando ao snippet de código do w3schools, é assim que o navegador pode distinguir entre font-style: normalefont-style: italic
usando o caminho relativo para o arquivo de fonte: (trecho de código de metaltoad.com )
Em vez de definir valores de família de fontes separados para cada fonte, você pode usar o mesmo nome de família de fontes para cada fonte e definir os estilos correspondentes, da seguinte forma:
`@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;
}`
Nesse caso, os .eotarquivos devem ser armazenados na mesma pasta que a página html. Mais uma vez, observe que o font-familymesmo é, o font-styleé diferente e também os URLs são diferentes: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Exemplo de uma versão em itálico da fonte:
ctan.org : este é um exemplo de como são fornecidos arquivos diferentes para diferentes estilos / pesos da mesma fonte. Nem negrito ou itálico são computados no local, eles são recuperados de seu arquivo específico.
