estilo de fuente: cursiva vs oblicua en CSS

Cuál es la diferencia entre estos dos:

font-style:italic
font-style:oblique

Intenté usar el editor de W3Schools pero no pude notar la diferencia.

¿Qué me estoy perdiendo?

En el sentido más puro (diseñador de tipo), un oblicuo es una fuente romana que se ha sesgado un cierto número de grados (8-12 grados, por lo general). El diseñador de tipos crea una cursiva con caracteres específicos (en particular, minúscula a) dibujados de manera diferente para crear una versión más caligráfica, así como inclinada.

Algunas fundiciones tipográficas han creado oblicuas de forma arbitraria que no necesariamente han sido aprobadas por los propios diseñadores ... algunas fuentes no estaban en cursiva ni oblicuas ... pero la gente lo hizo de todos modos. Y como ya sabrá, algunos sistemas operativos, al hacer clic en el ícono 'cursiva', sesgan la fuente y crean un oblicuo sobre la marcha. No es una vista agradable.

Es mejor especificar una cursiva solo cuando esté seguro de que la fuente se ha diseñado con una.

En general, una cursiva es una versión especial de la fuente, mientras que una versión oblicua es solo la versión normal inclinada un poco. Por lo tanto, ambos están inclinados y relacionados con la fuente regular, pero una cursiva tendrá formas de letras especiales hechas especialmente para ella.

La mayoría de las fuentes tienen una versión cursiva u oblicua; Nunca he visto uno que tenga ambos. (Si tiene una versión en cursiva, ¿por qué molestarse con una versión oblicua?)

El tipo oblicuo (o inclinado, inclinado) es una forma de tipo que se inclina ligeramente hacia la derecha, utilizada de la misma manera que el tipo cursivo. Sin embargo, a diferencia del tipo en cursiva, no utiliza diferentes formas de glifos; utiliza los mismos glifos que el tipo romano, excepto distorsionado.

Lectura adicional: estilo de fuente CSS oblicuo vs cursiva

Al igual que en cursiva y oblicua , la misma diferencia es visible cuando se compara cursiva con cursiva falsa .

Verá cursiva falsa siempre que una fuente normal esté sesgada, font-style: italic;mientras que una fuente cursiva verdadera está diseñada para ser inclinada.

La parte inferior de los dos ll shows s la diferencia claramente.

Ver ejemplo

De acuerdo con el tutorial CSS de desarrollador de mozilla :

cursiva: establece el texto para usar la versión en cursiva de la fuente si está disponible ; si no está disponible, simulará cursiva con oblicuo en su lugar.

oblicuo: establece el texto para utilizar una versión simulada de una fuente en cursiva, creada inclinando la versión normal.

A partir de aquí, deducimos que si una versión en cursiva de la fuente no está disponible , tanto la cursiva como la oblicua se comportan de la misma manera. Dado que el fragmento de código de W3Schools no especifica ningún particular font-family, creo que se usa una fuente predeterminada; una fuente predeterminada que probablemente no tenga una versión en cursiva.

Pero, ¿cómo hacer disponible una versión en cursiva de la fuente?

Esto significa que tenemos al menos dos versiones de la misma fuente, una "normal" y una cursiva. Estos se pueden especificar en la <style>sección con la @font-faceregla. Lea brevemente: developer.mozilla , w3schools , tympanus.net . Como puede ver, la fuente se carga como un archivo, que puede tener las siguientes extensiones:eot, otf, woff, truetype .

Hasta ahora, encontré dos formas de vincular el archivo de fuente

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