estilo de fuente: cursiva vs oblicua en CSS


209

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?


17
Mensaje del futuro: Wikipedia tiene un muy buen ejemplo que muestra la diferencia entre cursiva y oblicua .
Cornstalks

Pregunta de seguimiento tardía (¿o tal vez esto debería ir a UX?): ¿Cuál sería un caso de uso del mundo real para elegir específicamente la variante oblicua? ¿No es preferible la variante en cursiva "siempre"?
KlaymenDK

1
@KlaymenDK: Es cierto que este es un caso de uso limitado, pero puedo imaginar que prefiera una fuente oblicua para la legibilidad en ciertos tamaños de fuente pequeños en salidas pixeladas: Ejemplo: usar una fuente de 6pt a 8pt en una pantalla de factor de forma pequeño; Algunas formas en cursiva tienen trazos más delgados y más adornos que pueden disminuir la legibilidad en comparación con una simple "inclinación".
Dan H

Respuestas:


269

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.


37
Puede ser útil tener en cuenta que casi ninguna familia de fuentes en la naturaleza especifica las caras en cursiva y oblicua, y la mayoría de los motores de representación suministrarán la otra cara si la cara especificada no está disponible para esa fuente.
SingleNegationElimination

77
Esta respuesta no aborda las diferencias funcionales, la exclusividad mutua o las diferencias semánticas.
ahnbizcad

2
Con las fuentes cirílicas, por ejemplo, los caracteres en cursiva a menudo serán muy diferentes, mucho más como la forma cursiva, la forma oblicua será oblicua.
Moody_Mudskipper

1
¿Qué se supone que debe hacer un motor de renderizado si digo "cursiva" pero solo hay una versión "oblicua" de la fuente disponible? ¿O viceversa?
Michael

@SingleNegationElimination Su comentario debería haber sido la respuesta porque aborda el tecnicismo real en el lugar cuando se trata de CSS en particular. La "respuesta" elegida aquí es más sobre tipografía.
Vun-Hugh Vaw

72

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?)


21

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


16

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.

ingrese la descripción de la imagen aquí

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

Ver ejemplo


2
¿Te refieres a oblicuo igual a falso-cursiva?
zwcloud

Sí, si no hay disponible una fuente oblicua ni cursiva, los resultados serán los mismos (al menos en cromo para este ejemplo) next.plnkr.co/edit/SpaDzXmSb1oADxUfKVg1?preview
robstarbuck

NO podría haber hecho esta respuesta sin una ayuda visual, gracias
Max Alexander Hanna

0

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.


  • mi respuesta aborda la segunda parte de la pregunta: "... pero no pude notar la diferencia. ¿Qué me estoy perdiendo?"
    wile el coyote
    Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
    Licensed under cc by-sa 3.0 with attribution required.