Propiedad CSS font-style
La propiedad CSS font-style define el estilo de fuente del texto. Ofrece tres opciones: normal, italic y oblique.
La propiedad CSS font-style controla si el texto se muestra en posición vertical o inclinada. Sus tres valores de palabra clave son normal, italic y oblique. Es la forma estándar de cambiar un fragmento de texto a un estilo inclinado sin modificar la familia tipográfica ni el peso.
Esta página explica qué hace cada valor, la diferencia práctica entre italic y oblique, el ángulo opcional que se puede pasar a oblique, y un error común cuando una fuente no tiene una cara itálica real.
Por qué importa la inclinación
El texto inclinado es una señal visual que los lectores reconocen de inmediato: indica énfasis, títulos de obras, frases en otro idioma o términos técnicos. Usar font-style (en lugar de, por ejemplo, sesgar el texto manualmente) mantiene ese significado codificado en CSS, por lo que se conserva correctamente entre fuentes, niveles de zoom y tecnologías de asistencia.
Los diseñadores tipográficos tienen dos formas distintas de inclinar una letra:
- Italic es un diseño cursivo independiente: las formas de las letras se redibujan, no simplemente se inclinan. Una
aitálica real suele verse bastante diferente de su equivalente vertical. - Oblique es el diseño vertical inclinado mecánicamente unos pocos grados. Las formas se mantienen; simplemente se ladean.
Cuando escribes font-style: italic, el navegador primero busca una cara itálica real en la familia tipográfica. Si la familia no incluye ninguna, el navegador sintetiza una inclinación, que es esencialmente lo que produciría oblique. Por eso, con muchas fuentes web, italic y oblique tienen el mismo aspecto.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.fontStyle = "oblique"; |
Sintaxis
font-style: normal | italic | oblique | initial | inherit;La palabra clave oblique también acepta un ángulo opcional entre -90deg y 90deg, que permite controlar exactamente cuánto se inclina el texto:
font-style: oblique 14deg;Si omites el ángulo, los navegadores utilizan una inclinación predeterminada de aproximadamente 14deg.
Ejemplo del valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>La diferencia entre italic y oblique
Como se describió anteriormente, italic solicita el diseño cursivo específico de una fuente, mientras que oblique solicita una versión inclinada del diseño vertical. Cuando una fuente incluye ambas caras, las dos pueden verse notablemente diferentes; cuando solo incluye una, el navegador recurre a sintetizar la otra, por lo que se ven igual. El siguiente ejemplo muestra ambas una al lado de la otra:
Ejemplo con los valores italic y oblique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Ejemplo con todos los valores
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| normal | Indica que los caracteres del texto serán normales. Este es el valor predeterminado de esta propiedad. | Pruébalo » |
| italic | El texto se mostrará en cursiva. | Pruébalo » |
| oblique | El texto se mostrará en oblicua. | Pruébalo » |
| initial | Hace que la propiedad use su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
Error común: fuentes sin cara itálica
No todas las familias tipográficas incluyen una itálica real. Cuando aplicas font-style: italic a una de esas fuentes, el navegador simula la inclinación sesgando los glifos verticales. El resultado suele ser aceptable, pero se ve ligeramente menos pulido que una itálica diseñada. Si la cursiva es importante para tu tipografía, asegúrate de que la fuente que cargas incluya realmente un archivo itálico (en el caso de fuentes variables, que el eje itálico esté presente), e importa esa variante junto con la regular.
Para eliminar una inclinación heredada de un elemento padre —por ejemplo, para mantener una palabra en posición vertical dentro de un elemento <em> o <i>— establece el valor de nuevo en normal:
em.upright {
font-style: normal;
}Propiedades relacionadas
font-style es una parte de una declaración de fuente. Estos capítulos cubren el resto:
- CSS font-weight — controla la negrita, el otro indicador de énfasis habitual.
- CSS font-family — elige el tipo de letra, que determina si existe una itálica real.
- CSS font-size — establece el tamaño del texto.
- CSS font — la forma abreviada que define
font-style,font-weight,font-sizey más a la vez. - CSS text-decoration — otra forma de marcar el texto, con subrayados y líneas.