7. Propiedades de las fuentes
Las propiedades CSS de las fuentes son las que permiten controlar el tamaño, el tipo, el grosor o el estilo de las letras, entre otras cosas. En la siguiente tabla se muestran las propiedades de las fuentes más destacadas.
| Propiedad | Descripción | Valores |
|---|---|---|
font-family | Familias de fuentes | nombre-familia | * |
font-style | Estilo de la fuente | normal | italic | oblique |
font-variant | Convierte a mayúsculas manteniendo todas las letras en un tamaño inferior a la primera | normal | small-caps |
font-weight | Anchura de los caracteres. Normal = 400, Negrita = 700 | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
font-size | Tamaño de la fuente | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje |
7.1. Font-family
.a { font-family: "Times New Roman", Times, serif; }
.b { font-family: Arial, Helvetica, sans-serif; }
Las comillas en la propiedad font-family se utilizan para encerrar nombres de fuentes que contienen más de una palabra o caracteres especiales, como espacios, números o símbolos que podrían confundirse con otras partes de la sintaxis CSS.
7.2. Font-style
.a { font-style: normal; }
.b { font-style: italic; }
.c { font-style: oblique; }
La letra cursiva es una versión especial de la fuente, mientras que la letra oblicua es la versión normal de la fuente con una ligera inclinación.
7.3. Font-variant
.a { font-variant: normal; }
.b { font-variant: small-caps; }
7.4. Font-weight
.a { font-weight: normal; }
.b { font-weight: bold; }
.c { font-weight: 600; }
7.5. Font-size
.a { font-size: 20px; }
.b { font-size: 2em; }
.c { font-size: xx-small; }
.d { font-size: small; }
.e { font-size: 250%; }
Comprueba tu apendizaje