En CSS, disponemos de una gran cantidad de código para trabajar con fuentes, veremos algunos códigos que nos van a servir para darle estilos a las fuentes.

Seleccionar Tipografía en CSS

Para seleccionar el tipo de fuente con el que vamos a trabajar, en CSS hacemos uso del código: font-family

Por ejemplo:

font-family:Arial, Helvetica, sans-serif;

Con el anterior código le indicamos al navegador en el que se visualiza nuestro sitio que muestre el texto con la tipografía»Arial«, si esta no esta disponible o no se encuentra instalada, utilice la tipografía «Helvetica» para mostrar el contenido, si esta no se pudiera usar, va a mostrar el texto con la tipografía «sans-serif» y si esta no se pudiese utilizar, el navegador utilizara la fuente por defecto configurada en el sistema.

Tamaño de la fuente en CSS

Para indicar el tamaño de la fuente en CSS, hacemos uso del código: font-size

Por ejemplo:

font-size:36px;

Si aplicamos el anterior código a un párrafo de texto en CSS, este tendrá un tamaño de 36 Píxeles. Recordemos las unidades de medida que podemos utilizar en CSS. Unidades de medida en CSS.

Ademas de los tamaños que podemos definir con números, existen tamaños predefinidos en CSS tales como:

• large
• larger
• medium
• small
• smaller
• x-large
• x-small
• xx-large
• xx-small

Color de la fuente en CSS

El  color de la fuente en CSS puede modificarse haciendo uso del código:  color

Por ejemplo:

color:#FF0000;

Con el anterior código estamos dando un color rojo al texto, debemos especificar el color que queremos usar mediante su código hexadecimal precedido por el sigo de numero (#), o podemos indicar el color en texto cuando se trata de uno de los colores principales, red, blue, black, entre otros.

Estilos de fuente en CSS

En CSS también podemos darle diferentes estilos a las fuentes usando el código: font-style

Por ejemplo:

font-style:italic;

Con el anterior código, indicaremos que en el parrafo donde se apliquen los estilos, la fuente sera del tipo italic, o cursiva como también suele llamarse.

A este comando podemos darle los siguientes valores:

• italic
• inherit
• normal
• oblique

Grosores de fuente en CSS

Para definir un grosor de la fuente en CSS, usaremos el siguiente código: font-weight

Por ejemplo:

font-weight:700;

Con este código, indicamos el grosor del texto al que le estamos aplicando el estilo, dentro de los valores que podemos darle a este código encontramos, grosores por debajo del predefinido bold, o comúnmente llamado negrita, los valores que acepta son los siguientes:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder
• inherit
• lighter
• normal

Otros estilos de fuentes en CSS

Podemos hacer uso de otros estilos que se usan de forma un poco menos común,

Para estirar: font-stretch

Variantes: font-variant