Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su grosor, etc.
- font-family
-
Indicamos la familia de la fuente a utilizar. Sus posibles valores son los nombres de las fuentes, pudiendo especificar un conjunto de familias. Se selecciona la primera que se encuentra en el sistema. Se hereda.
nombre de las familias de las fuentes | familia genérica
BODY { font-family: Verdana, Arial, Helvetica, sans-serif}
En el ejemplo anterior estamos diciendo que todo el contenido de la página este en Verdana, y que en caso de que no este instalada utilice Arial y si no Helvetica y si no el tipo de familia genérica sans-serif.
- font-style
-
Especifica el estilo de la fuente, es decir, si los caracteres iran en normal, en itálica (cursiva) o en oblicua (un poco más inclinada que la itálica). Se hereda.
normal | italic | oblique
H1, H2, H3{font-style: italic} H1,EM{font-style: normal}
En este ejemplo estamos indicando que las cabeceras de hasta nivel 3 iran en itálica. Pero que el texto emfatizado de las cabeceras de nivel 1 iran en normal.
- font-variant
-
Especifica la variante de la fuente, es decir, si los caracteres serán tomados de la fuente normal o de small-caps (o versalitas, donde las minúsculas son parecidas a las mayusculas pero de menor tamaño) dentro de una familia de fuentes. Se hereda.
normal | small-caps
- font-weight
-
Especifica el peso, densidad o grosor (cantidad de espacio ocupado en relación con el rectángulo en que se inscribe el carácter) de la fuente de caracteres dentro de una família de fuentes, con valores entre 100 y 900 siendo cada vez más densos. El valor 400 equivale a normal, y el 700 a bold.
El valor bolder indica que los caracteres deben ser más densos que el valor heredado excepto en el que caso de que ya valga 900.
El valor lighter funciona a la inversa de bolder indicando que tiene que ser de menos densidad excepto en el caso de que ya valga 100.
Esta propiedad se hereda.
lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900
STRONG {font-weight: bolder}
- font-size
-
Especifica el tamaño de la fuente. Se hereda.
Puede ponerse como una longitud en unidades (absoluta o relativa), aunque también admite palabras reservadas que indican tamaños absolutos predefinidos (de menor a mayor xx-small, x-small, small, medium, large, x-large, xx-large).
Los valores larger y smaller especifican un tamaño, en relación con los anteriores, respectivamente un grado mayor o menor que el heredado.
Para facilitar el funcionamiento en cascada, es conveniente utilizar longitudes relativas (como em) o porcentajes.
XX units | % | larger | smaller | xx-small | x-small | medium | large | x-large | xx-large
Tutoriales
Ejemplos
