Unidad 17. Estilos CSS Avanzado (V)


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, cursive, fantasy, monospace...

Aunque esta propiedad también soporta que nombres un listado de diferentes fuentes. El navegador las buscará en el equipo del usuario y si la encuentra la mostrará. El orden en este caso también es importante, pues mostrará la que primero encuentre.

Es recomendable, aun así, indicar siempre una familia en el caso de que no se encontrase ninguna de las fuentes instaladas, ejemplo:

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

 

font-style: indica el estilo de la fuente, puede tomar los valores italic y oblique.

italic, oblique

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.

 

font-variant: establece la variante de la fuente. Puede tomar el valor small-caps (versales). El valor normal hará que se muestre el estado por defecto de la fuente.

Small-Caps, Normal

 

font-weight: indica el peso de la fuente. 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

 

font-size: establece el tamaño de la fuente. Puedes utilizar lo 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. Que también mostrará el texto en relación a su elemento padre.

Pero, de lejos, la forma más utilizada es especificando expresamente el tamaño de la fuente en una cifra.

Las unidades utilizadas son varias, ems, puntos, píxeles... El sistema de puntos (pt) varía un poco según los sistemas operativos, por lo que es aconsejable utilizar alguno de los restantes:

a { font-size: 12em; }

p { font-size: 14px; }

 

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

Así una retaíla de reglas como esta:

p { font-style: italic; }

p { font-variant: small-caps; }

p { font-weight: bold; }

p { font-size: large; }

p { 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;

}

 




  Ir a la página anterior Índice del curso  Ir a la siguiente página  

Pág. 17.5




Página inicial  Cursos Informática Gratuitos

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


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