Unidad 17. Estilos CSS Avanzados (VII)


17.7. Controles de fuente

Ya hemos visto cómo manejarnos con los selectores, ahora veremos cómo deberemos crear las definiciones de los estilos.

Empezaremos viendo los controles de modificación de fuentes:

 

font-family: indica la familia de fuente en la que se mostrará el texto, puede tomar los valores serif, sans-serif, cursive, fantasy y monospace:

serif, sans-serif, fantasy, cursive, monospace...

Aunque esta propiedad también soporta los nombres en un listado de diferentes fuentes. El navegador las buscará de izquierda a derecha en el equipo del usuario, y mostrará la primera que encuentre. Al final, es recomendable indicar una de las fuentes del ejemplo de arriba, que son las fuentes genéricas (familias).

p { font-family: Arial, Helvetica, sans-serif; } 

Si el nombre de la fuente contiene espacios, lo pondremos entre comillas dobles (p. ej. "Times New Roman")

 

font-style: indica el estilo de la fuente (básicamente, nos permite ponerla en cursiva), puede tomar los valores italic, oblique y normal.

italic, oblique, normal

Algunas fuentes están hechas especialmente para tener una variante en italic (cursiva), para aquellas que no lo tengan implementado utiliza el atributo oblique que hace que el navegador incline automáticamente la fuente para mostrarla en cursiva. La mayoría de navegadores no distinguen entre estos valores, y aplican siempre oblique, por lo que éste es el valor más recomendado. Para mostrar el texto normal, le damos el valor normal.

 

font-variant: establece la variante de la fuente. Puede tomar el valor small-caps (versales). Esto muestra las minúsculas como mayúsculas de menor tamaño. El valor normal hará que se muestre el estado por defecto de la fuente.

Small-Caps, Normal

Observa que Dreamweaver no muestra correctamente este estilo.

 

font-weight: indica el peso de la fuente, es decir, nos sirve para ponerla en negrita. Los valores más utilizados son: bolder, bold y lighter. También puedes utilizar valores del 100 al 900, siendo el primero la fuente más ligera y el último el más pesado.

bolder, bold, lighter

Aunque en teoría podemos indicar distintos grosores, en la práctica la mayoría de navegadores solo aplican normal y bold.

 

font-size: establece el tamaño de la fuente. Puedes utilizar los valores predefinidos smaller, larger, xx-small, x-small, small, medium, large, x-large y xx-large. Los dos primeros valores establecen el tamaño de la fuente en comparación a la definida en el elemento padre donde se encuentra, así se mostrará más pequeña (smaller) o más grande (larger).

xx-small, x-small, small, medium, large, x-large, xx-large

También es posible establecer el tamaño del texto utilizando porcentajes (%) o em. Que también mostrará el texto en relación a su elemento padre (100% = 1em).

Éste es el tipo más recomendado. Ya que con sólo cambiar el tamaño de la fuente base, todos los elementos se ajustarán a ésta manteniendo la proporción.

Existen otras unidades relativas puntos (pt), píxeles (px) ... El sistema de puntos (pt) varía un poco según los sistemas operativos, mientras que el valor en píxeles (px) depende de la resolución de pantalla. El valor em se define según el amcho de la letra M mayúscula de la fuente

Incluso podemos emplear valores concretos, como centímetros (cm).

a { font-size: 12em; }
p { font-size:  14px; }
.nota { font-size:  0.90%; } 

 

Es posible definir todos estos estilos que hemos visto en una sola definición. Para ello utilizaremos sólo la propiedad font:.

Así, una retahíla de reglas como ésta:

p { 
   font-style: italic;  
   font-variant: small-caps; 
   font-weight: bold;
   font-size: large;
   font-family: monospace; 
}

Puede escribirse como:

p { font: italic small-caps bold large monospace; }

Recuerda que el orden debe ser siempre el mismo: style, variant, weight, size y family.

Si no vas a utilizar una de las definiciones puedes omitirla como en este ejemplo:

p { font: bold sans-serif; }

Marzo-2015
Pág. 17.7
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.