Tipos de Fuentes CSS

Familias de fuentes Genéricas

Las fuentes genéricas sirven como soporte o ayuda, para indicar cierta similitud cuando ninguna de las fuentes específicas puede ser utilizada. Tenemos cinco familias genéricas de fuentes:

1. Serif la diferencia de altura entre mayusculas y minusculas es marcado.
2. Sans-serif Tienen un espaciado proporcional con muy poca variación entre los trazos finos y gruesos, la altura entre mayusculas y minusculas es similar.
3. Cursive La principal característica de esta fuente es el parecido a la escritura manual o de trazos hechos con pincel.
4. Monospace La caracteristica principal es que todas las letras son homogeneas y ocupan un mismo espacio horizontal. su apariencia es similar al texto producido con una máquina de escribir manual.
5. Fantasy Las fuentes de fantasía, se utilizan para presentar los caracteres de forma decorativa

Familias de fuentes

El CSS facilita el control y especificación de fuentes, mediante la propiedad 'font-family', al definir las fuentes debemos tener claro que no siempre todas las fuentes estaran disponibles en los sistemas de los usuarios, de manera que se debe listar una serie de fuentes parecidas con el mismo estilo, tamaño y la familia genérica a la que pertenece.

Definiendo una fuente con parecido a la escritura manual o con pincel: fuente 'Comic Sans MS', familia genérica 'cursive'.

h2 {font-family: "Comic Sans MS", cursive;}

primero especificamos la fuente en este caso "Comic Sans MS" luego seguido de una coma(,) indicamos la familia genérica 'cursive'.

Estilo de fuente de la familia Arial, Helvetica y familia genérica sans-serif:

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

Primero especificamos la primera fuente en este caso "Arial" luego seguido de una coma(,) la siguiente fuente en el caso de que la primera no se encuentre "Helvetica" y finalmente señalamos la familia genérica 'sans-serif'.

font-family: Arial, Helvetica, sans-serif;
font-family: Helvetica, sans-serif;
font-family: "Lucida Sans Unicode",sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
font-family: "Courier New", Courier, monospace;
font-family: "Comic Sans MS", cursive;