4.1 Propiedad font-style
CSS también proporciona muchas propiedades para manejar las fuentes y su visualización en páginas web. Las propiedades font-style, font-variant y font-stretch permiten configurar el estilo del texto, su visualización y anchura. Veamos cada una de estas propiedades con más detalle.
La propiedad font-style define el estilo del texto. Se usa para establecer texto en cursiva o en estilo normal.
Valores:
normal: estilo normal del texto (por defecto)italic: texto en cursivaoblique: texto inclinado, similar al italic, pero difiere en la forma de inclinación
Ejemplo de uso:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Este es un texto normal.</p>
<p class="italic">Este es un texto en cursiva.</p>
<p class="oblique">Este es un texto inclinado (oblique).</p>
</body>
4.2 Propiedad font-variant
La propiedad font-variant controla la visualización del texto en mayúsculas pequeñas (capitulares). Permite cambiar la fuente para que todas las letras sean mayúsculas, pero con un tamaño más pequeño para las letras que originalmente eran minúsculas.
Valores:
normal: texto normal (por defecto)small-caps: texto en mayúsculas pequeñas
Ejemplo de uso:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Este es un texto normal.</p>
<p class="small-caps">Este es un texto en mayúsculas pequeñas.</p>
</body>
Valores adicionales (CSS Fonts Level 4)
CSS Fonts Level 4 añade valores adicionales para la propiedad font-variant, como all-small-caps, petite-caps, all-petite-caps, unicase y titling-caps. Sin embargo, estos no son compatibles con todos los navegadores.
4.3 Propiedad font-stretch
La propiedad font-stretch controla el grado de compresión o expansión de la fuente. Cambia el ancho de la fuente sin afectar a la altura, y se utiliza para elegir la variante de fuente adecuada si está disponible.
Valores:
normal: ancho normal de la fuente (por defecto)ultra-condensed: fuente máxima comprimidaextra-condensed: fuente muy comprimidacondensed: fuente comprimidasemi-condensed: fuente moderadamente comprimidasemi-expanded: fuente moderadamente expandidaexpanded: fuente expandidaextra-expanded: fuente muy expandidaultra-expanded: fuente máxima expandida
Ejemplo de uso:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Este es un texto con anchura de fuente normal.</p>
<p class="condensed">Este es un texto con anchura de fuente comprimida.</p>
<p class="expanded">Este es un texto con anchura de fuente expandida.</p>
</body>
GO TO FULL VERSION