CSS

CSS Fonts - Fuentes

<<< Textos - Text en CSS Bordes - Border en CSS >>>

Las fuentes con CSS

Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Podemos cambiar el color, el tipo de fuente, la intensidad, el tamaño, etc.

Tipo de fuentes

Para definir el tipo de fuente usamos la propiedad "font-family".
Es recomendable usar un tipo de fuente común, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).

Código


<html>
<head>
 <style type="text/css">
  p{font-family: sans-serif}
 </style>
</head>

<body>
 <p>Tipo de fuente : sans-serif.</p>
</body>
</html>

Resultado

Tipo de fuente : sans-serif.

Intensidad de las fuentes

Una característica muy útil es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad "font-weight".

Código


<html>
<head>
 <style type="text/css">
  p{font-weight: bold}
 </style>
</head>

<body>
 <p>Intensidad de la fuente : bold(negrita).</p>
</body>
</html>

Resultado

Intensidad de la fuente : bold(negrita).

Tamaño de las fuentes

Controlar el tamaño de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es "font-size".
Este ejemplo es muy ilustrativo.

Código

<html>

<body>
 <p style="font-size:xx-small">Tamaño:xx-small</p>
 <p style="font-size:x-small">Tamaño:x-small</p>
 <p style="font-size:small">Tamaño:small</p>
 <p style="font-size:medium">Tamaño:medium</p>
 <p style="font-size:large">Tamaño:large</p>
 <p style="font-size:x-large">Tamaño:x-large</p>
 <p style="font-size:xx-large">Tamaño:xx-large</p>
 <p style="font-size:larger">Tamaño:larger</p>
 <p style="font-size:smaller">Tamaño:smaller</p>
</body>

</html>

Resultado

Tamaño:xx-small

Tamaño:x-small

Tamaño:small

Tamaño:medium

Tamaño:large

Tamaño:x-large

Tamaño:xx-large

Tamaño:larger

Tamaño:smaller

Propiedades de las fuentes

Propiedad	Descripción	Valores	Detalles
font	Atajo para establecer el resto de propiedades sobre las fuentes a la vez.	font-style	Estilo de fuente
		font-variant	Variante de fuente
		font-weight	Peso de la fuente
		font-size/line height	Tamaño de la fuente
		font-family	Familia de fuetes
		caption	Fuente a utilizar en los botones, menús desplegables, etc.
		icon	Ícono
		menu	Fuente de los menús desplegables
		message-box	Fuente de las caja de mensajes
		small-caption	Pequeña leyenda
		status-bar	Fuentes de la barra de estado
font-family	Familias de fuentes.	nombre-familia	Nombre de la familia de fuentes
font-family	Familias de fuentes.	familia-genérica	Familia genérica
font-style	Estilo de la fuente.	normal	Estilo normal
		italic	Itálica
		oblique	Oblicua
font-variant	Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas.	normal	Normal
font-variant		small-caps	Mayúsculas pequeñas
font-weight	Intensidad de la fuente.	normal	Normal
		bold	Negrita
		bolder	Negrita mas fuerte
		lighter	Suave
		100	Valor 100
		200	Valor 200
		300	Valor 300
		400	Valor 400
		500	Valor 500
		600	Valor 600
		700	Valor 700
		800	Valor 800
		900	Valor 900
font-size	Tamaño de la fuente.	xx-small	XX-Pequeña
		x-small	X-Pequeña
		small	Pequeña
		medium	Mediana
		large	Grande
		x-large	X-Grande
		xx-large	XX-Grande
		larger	Máxima
		smaller	Mínima
		tamaño	Tamaño
		%	Porcentaje
font-size-adjust	Especifica un valor de relación para un elemento que preserve la altura de la letra "x" de la fuente elegida en primera instancia en la fuente sustituida.	none	No preserva la altura de la fuente
font-size-adjust		número	número
font-strech	Flexibilidad de la fuente. Expande o comprime horizontalmente la fuente. Nota: por ahora los navegadores no soportan el uso de esta propiedad.	normal	normal
		wider	expande al siguiente valor
		narrower	comprime al siguiente valor
		ultra-condensed	ultra comprimido
		extra-condensed	extra comprimido
		condensed	comprimido
		semi-condensed	semi comprimido
		semi-expanded	semi expandido
		expanded	expandido
		extra-expanded	extra expandido
		ultra-expanded	ultra expandido