CSS Fonts - Fuentes

Elige la familia, el estilo, el peso y el tamaño de las fuentes de tu sitio.


Las fuentes

Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas.
Posiblemente la definición de las fuentes sea el uso más común de CSS.
Entre los ajustes que podemos aplicar a las fuentes, tenemos:

  1. La familia
  2. La intensidad
  3. El estilo
  4. El tamaño
  5. La variante
  6. La definición general

Familia de fuentes - font-family

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.).

Sintaxis

<head>
<style="type:text/css">
selector {font-family: familia de fuente, familia de fuente genérico}
</style>
</head>

Nota: debemos utilizar comas entre los valores.

Los posibles valores para definir las familias de fuentes

Las más comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | Univers

Los posibles valores para definir las familias de fuentes genérico

serif | sans-serif | cursive | fantasy | monospace

Ejemplo

Vamos a definir una familia para una fuente.

Código
<head>
<style type="text/css">
p{font-family:"Times New Roman", serif}
</style>
</head>

<body>
<p>La familia de esta fuente es Times New Roman.</p>
</body>
Resultado

La familia de esta fuente es Times New Roman.


Intensidad de las fuentes - font-weight

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

Sintaxis

<head>
<style="type:text/css">
selector {font-weight: valor}
</style>
</head>

Los posibles valores para definir los fondos

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

Ejemplo

Vamos a aplicar intensidad a las fuentes del elemento h2 de esta página.

Código
<head>
<style type="text/css">
h2{font-weight:lighter}
</style>
</head>

<body>
<h2>La intensidad de este texto es lighter.</h2>
</body>
Resultado

La intensidad de este texto es lighter.


Estilo de las fuentes - font-style

La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.

Sintaxis

<head>
<style="type:text/css">
selector {font-style: valor1}
</style>
</head>

Los posibles valores para definir los estilos

normal | italic | oblique

Ejemplo

Vamos a definir el estilo del elemento h3 de este ejemplo.

Código
<head>
<style type="text/css">
h3{font-style:oblique}
</style>
</head>

<body>
<h3>El estilo de este título es oblique.</h3>
</body>
Resultado

El estilo de este título es oblique.


Tamaño de las fuentes - font-size

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

Sintaxis

<head>
<style="type:text/css">
selector {font-size: valor}
</style>
</head>

Los posibles valores para definir el tamaño de las fuentes

xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | tamaño | %

Ejemplo

Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.

Código
<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>
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


Variante de las fuentes - font-variant

Una variación que se le puede dar a las fuentes es el de usar pequeñas mayúsculas, para eso usamos de la propiedad font-variant.

Sintaxis

<head>
<style="type:text/css">
selector {font-variant: valor}
</style>
</head>

Los posibles valores para definir las variantes de las fuentes

normal | small-caps

Ejemplo

Vamos a variar las fuentes de este título h2.

Código
<head>
<style type="text/css">
h2{font-variant:small-caps}
</style>
</head>

<body>
<h2>El texto esta escrito en minúscula.</h2>
</body>
Resultado

El texto esta escrito en minúscula.


La propiedad de las fuentes - font

La propiedad font es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.

Sintaxis

<head>
<style="type:text/css">
selector {font: valor1 valor2 valor n}
</style>
</head>

Nota: debemos dejar un espacio en blanco entre los valores.

Los posibles valores para definir las fuentes

Todos los valores de font-family | font-style | font-variant | font-weight | font-size | caption | icon | menu | message-box| small-caption | status-bar

Ejemplo

Vamos a definir un tipo de fuente para p.

Código
<head>
<style type="text/css">
p{font:large Palatino bold italic}
</style>
</head>

<body>
<p>El tipo de fuente es Palatino large bold en italic.</p>
</body>
Resultado

El tipo de fuente es Palatino large bold en italic.


Propiedades de las fuentes

PropiedadDescripciónValoresDetallesEj.
font Atajo para establecer el resto de propiedades sobre las fuentes a la vez. font-style Estilo de fuente Ejemplo concentrando las demas propiedades de las fuentes
font-variant Variante de fuente
font-weight Peso de la fuente
font-size Tamaño de la fuente
font-family Familia de fuentes
caption Fuente a utilizar en los botones, menús desplegables, etc. Ejemplo de la propiedad font y el valor caption
icon Ícono Ejemplo de la propiedad font y el valor icon
menu Fuente de los menús desplegables Ejemplo de la propiedad font y el valor menu
message-box Fuente de las caja de mensajes Ejemplo de la propiedad font y el valor message-box
small-caption Pequeña leyenda Ejemplo de la propiedad font y el valor small-caption
status-bar Fuentes de la barra de estado Ejemplo de la propiedad font y el valor status-bar
font-family Familias de fuentes. nombre-familia Nombre de la familia de fuentes Ejemplo del uso de una familia de fuentes
familia-genérica Familia genérica
font-style Estilo de la fuente. normal Estilo normal Ejemplo del uso de los diferentes estilos de fuentes
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 Ejemplo comparativo de como convertir minúsculas a pequeñas mayúsculas
small-caps Mayúsculas pequeñas
font-weight Intensidad de la fuente. normal Normal Ejemplo comparativo de todas las intensidades de las fuentes
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 Ejemplo comparativo de todos los tamaños que se pueden aplicar a las fuentes
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


<<< Textos - Text en CSS Contornos - Outline en CSS >>>

En la Web