| Definición | Establece el estilo del tipo de letra |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | normal |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/fonts.html#propdef-font-style |
Ejemplos de uso
La propiedad font-style permite establecer el estilo con el que se muestra el tipo de letra seleccionado mediante la propiedad font-family. Los tres estilos disponibles son: normal (normal), itálico (italic) y oblicuo (oblique).
Normalmente, la propiedad font-style se utiliza para mostrar un texto en cursiva (también llamada itálica o bastardilla). En el siguiente ejemplo, se modifica el estilo de la letra que muestra el párrafo:
<p style="font-style: italic;">Lorem ipsum dolor sit amet, consectetuer <em>adipiscing elit</em>. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus <em>urna sed ligula</em></p>.
De la misma forma, también se puede utilizar la propiedad font-style para mostrar con un estilo normal la letra que se muestra por defecto en cursiva. En el siguiente ejemplo, el primer elemento <em> no se muestra en cursiva gracias a la propiedad font-style:
<p>Lorem ipsum dolor sit amet, consectetuer <em style="font-style: normal;">adipiscing elit</em>. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus <em>urna sed ligula</em></p>.
El otro estilo disponible es oblique, que corresponde al estilo de letra oblicuo. Visualmente, los estilos itálico y oblicuo son similares pero presentan diferencias muy importantes. En el estilo oblicuo, cada letra del estilo normal se inclina hacia la derecha para formar un estilo parecido al itálico.
Simplificando los detalles más técnicos, se puede afirmar que el estilo itálico es una cursiva auténtica porque utiliza diferentes "dibujos" (en realidad llamados "glifos" en el ámbito de la tipografía) para representar cada carácter. Por su parte, el estilo oblicuo es una cursiva falsa porque sólo consiste en inclinar los caracteres normales.
A continuación se muestra un párrafo de texto con el estilo oblique:
<p style="font-style: oblique;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula</p>.
Aunque las diferencias visuales son sutiles, algunos caracteres de algunos tipos de letra determinados muestran diferencias muy importantes en sus estilos itálico y oblicuo. La siguiente imagen muestra los caracteres básicos de la fuente Myriad Pro. La fila superior corresponde al estilo itálico y la inferior es la del estilo oblicuo, donde se aprecian grandes diferencias en los caracteres a, b, e, g, p, q:
A continuación se muestran todos los caracteres con un tamaño de letra muy grande para apreciar las diferencias de cada estilo:
font-style: oblique abcdefghijklmñnopqrstuvwxyz
font-style: italic abcdefghijklmñnopqrstuvwxyz
Desafortunadamente, cuando un tipo de letra dispone del estilo cursiva, los navegadores muestran el estilo oblicuo con el mismo aspecto. Por este motivo, seguramente todos los caracteres del ejemplo anterior tienen el mismo aspecto cuando los ves en cualquier navegador.