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
URL absoluta del archivo de fuente: (fragmento 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');
}`
Tenga en cuenta que en ambos casos tenemos font-family: 'Open Sans', que básicamente define la misma fuente; pero en el primer caso tenemos font-style: normal;, mientras que en el segundo caso tenemos font-style: italic;. También tenga en cuenta que las URL apuntan a diferentes archivos. Ahora, volviendo al fragmento de código de w3schools, así es como el navegador puede distinguir entre font-style: normalyfont-style: italic
utilizando la ruta relativa al archivo de fuente: (fragmento de código de metaltoad.com )
En lugar de definir valores de familia de fuentes separados para cada fuente, puede usar el mismo nombre de familia de fuentes para cada fuente y definir los estilos coincidentes, de la siguiente manera:
`@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;
}`
En este caso, los .eotarchivos deben almacenarse en la misma carpeta que la página html. Nuevamente, observe que font-familyes igual, font-stylees diferente, y también las URL son diferentes: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Ejemplo de una versión en cursiva de la fuente:
ctan.org : este es un ejemplo de cómo se proporcionan diferentes archivos para diferentes estilos / pesos de la misma fuente. Ni negrita ni cursiva se calculan en el acto, se recuperan de su archivo específico.
