estilo da fonte: itálico vs oblíquo em CSS

Qual é a diferença entre estes dois:

font-style:italic
font-style:oblique

Tentei usar o editor do W3Schools, mas não consegui perceber a diferença.

o que estou perdendo?

No sentido mais puro (designer de tipos), um oblíquo é uma fonte romana que foi inclinado em um certo número de graus (8 a 12 graus, geralmente). Um itálico é criado pelo designer de tipo com caracteres específicos (notavelmente a minúscula a) desenhados de maneira diferente para criar uma versão mais caligráfica e inclinada.

Algumas fundições criaram arbitrariamente oblíquos que não são necessariamente aprovados pelos próprios designers ... algumas fontes foram feitas para não ficar em itálico ou oblíquo ... mas as pessoas fizeram de qualquer maneira. E como você deve saber, alguns sistemas operacionais, ao clicar no ícone 'itálico', inclinam a fonte e criam um oblíquo em tempo real. Não é uma visão agradável.

É melhor especificar um itálico apenas quando tiver certeza de que a fonte foi projetada com um.

Geralmente, um itálico é uma versão especial da fonte, enquanto uma versão oblíqua é apenas a versão regular inclinada um pouco. Portanto, ambos são inclinados e estão relacionados à fonte regular, mas um itálico terá formas de letra especiais criadas especialmente para ele.

A maioria das fontes possui uma versão em itálico ou oblíqua; Eu nunca vi um que tenha ambos. (Se você tem uma versão em itálico, por que se preocupar com uma versão oblíqua?)

O tipo oblíquo (ou inclinado, inclinado) é uma forma de tipo que se inclina levemente para a direita, usada da mesma maneira que o tipo itálico. Ao contrário do tipo itálico, no entanto, ele não usa formas de glifo diferentes; usa os mesmos glifos que o tipo romano, exceto distorcido.

Leitura adicional: estilo de fonte css oblíquo vs itálico

Assim como em itálico e oblíquo , a mesma diferença é visível ao comparar itálico com falso itálico .

Você verá itálico-falso sempre que uma fonte normal estiver inclinada, font-style: italic;enquanto uma fonte itálica verdadeira foi projetada para ser inclinada.

A parte inferior dos dois ll s mostra a diferença claramente.

Consultar exemplo

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

`@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');
 }`

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