Propiedad CSS font-style
La propiedad font-style define el estilo de fuente de un texto. La propiedad tiene tres valores: normal, italic y oblique.
Italic es un estilo de fuente cursivo en el carácter, mientras que oblique es una versión inclinada de la fuente estándar.
| Initial Value | normal |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS1 |
| DOM Syntax | object.style.fontStyle = "oblique"; |
Sintaxis
Sintaxis de la propiedad CSS font-style
font-style: normal | italic | oblique | initial | inherit;Ejemplo de la propiedad font-style:
Ejemplo de la propiedad font-style:
<!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 los estilos de fuente italic y oblique
Italic se considera un estilo de fuente cursivo en el carácter, pero oblique son versiones inclinadas de la fuente estándar. Sin embargo, hay una diferencia muy pequeña entre estos dos estilos de fuente. El siguiente ejemplo mostrará el uso de ambos estilos de fuente, italic y oblique:
Ejemplo de la propiedad font-style con los valores "italic" y "oblique":
Ejemplo de la propiedad font-style 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 de la propiedad font-style con todos los valores:
Ejemplo de la propiedad font-style 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
| Value | Description | Play it |
|---|---|---|
| normal | Significa que los caracteres del texto serán normales. Este es el valor predeterminado de esta propiedad. | Play it » |
| italic | El texto se mostrará en cursiva. | Play it » |
| oblique | El texto se mostrará en oblicua. | Play it » |
| initial | Hace que la propiedad use su valor predeterminado. | Play it » |
| inherit | Hereda la propiedad del elemento padre. |
Práctica
How can the font-style property be used in CSS?