Texto en CSS: Fuentes

Una de las cosas más importantes que un diseñador gusta de modificar cuando hace una página web es la fuente. El lenguaje CSS hace esta tarea muy sencilla. Aquí tienes las instrucciones que vas a utilizar:

line-height
font-family
font-size
font-stretch
font-style
font-variant
font-weight
font

La primera, line-height, te permite especificar el espacio entre una línea de texto y siguiente.

Sobre font-family, necesitas saber dos cosas: La primera es que puedes usar esta instrucción para especificar qué fuente usará el navegador para mostrar el contenido de tu página, pero esto será posible solamente si el usuario final tiene la fuente instalada en su computador (sin mencionar que los usuarios de Windows, Linux y Mac tienen solo unas quince o dieciséis fuentes en común. Por eso, los diseñadores normalmente señalan una segunda y aun tercera alternativa a las fuentes que usará font-family.

La segunda es que se necesita escribir el nombre completo de la fuente, y entre apóstrofes, si este lleva más de una palabra. Separa las fuentes alternativas con comas, pero sin colocar un espacio entre las alternativas.

font-size ayuda a especificar el tamaño de fuente que se usará para la página web. Aparte de las medidas específicas, esta instrucción acepta xx-small, x-small, small, medium, large, x-large y xx-large como valores.

font-stretch permite especificar qué tan ancha será la letra en comparación a la fuente original. Aquí se puede usar ultra-condensed (ultra condensada), extra-condensed (extra condensada), condensed (condensada), semi-condensed (semi condensada), narrower (más angosta), normal, wider (más ancha), semi-expanded (semi expandida), expanded (expandida), extra-expanded (extra expandida) y ultra-expanded (ultra expandida) como valores.

font-style solo tiene tres alternativas: normal, italic (itálica) u oblique (oblícua).

A su vez, font-variant tiene solo dos: normal y small-caps (las minúsculas son mayúsculas pequeñas).

Y en lo que concierne a font-weight (peso de la fuente), las opciones son: lighter (más ligera), normal, bold (negrita), bolder (más negrita) y valores numéricos que van de 100 a 900. Con respecto a estos valores numéricos, normal estaría en aproximadamente 450. Gradúa desde allí.

Por último, con font uno especifica casi todas las instrucciones anteriores con una sola línea. solo hay que respetar que el orden es relativamente fijo:

font: font-style font-variant font-weight font-size/line-height font-family;

Ejemplos

line-height: 150%;
font-family: 'bitstream vera sans',verdana,sans;
font-size: .88em;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;

font: italic bold .88em/1.28em 'bitstream vera sans',verdana,sans;


Conocimiento + Computadores