Acerca del Web Design Group

Propiedades de fuentes



Font Family (Familia de fuente)

Sintaxis: font-family: [[<nombre de familia> | <familia genérica>],]* [<nombre de familia> | <familia genérica>]
Valores posibles: <nombre-de-familia>
  • Cualquier nombre de familia de fuente puede usarse
<familia-genérica>
  • serif (por ej., Times)
  • sans-serif (por ej., Arial o Helvetica)
  • cursive (por ej., Zapf-Chancery)
  • fantasy (por ej., Western)
  • monospace (por ej., Courier)
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si

Las familias de fuentes pueden asignarse por un nombre de fuente específica o por una familia de fuentes genérica. Obviamente, si define una fuente específica, no será tan probable de encontrar como una familia de fuente genérica. Puede hacer múltiples asignaciones de familias, y si hace una asignación de fuente específica, debería ser seguida por un nombre de familia genérica en el caso de que la primera selección no se halle presente.

Una muestra de declaración de font-family podría ser así:

P { font-family: "New Century Schoolbook", Times, serif }

Note que las dos primeras asignaciones son fuentes de tipo específico: New Century Schoolbook y Times. Sin embargo, ya que ambas son fuentes serif, la familia genérica está listada como un respaldo en el caso de que el sistema no tenga ninguna de las dos, sino otra fuente serif que cumpla los requisitos.

Cualquier nombre de fuente que contenga un espacio en blanco deberá ser entrecomillada, con comillas simples o dobles.

La familia de fuente también puede darse con la propiedad font.


Font Style (Estilo de fuente)

Sintaxis: font-style: <valor>
Valores posibles: normal | italic | oblique
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-style define que la fuente se muestre en una de tres formas: normal, itálica u oblicua (inclinada). Una hoja de estilo de muestra con declaraciones font-style podría ser así:

H1 { font-style: oblique }
P  { font-style: normal }

Font Variant (Variante de fuente )

Sintaxis: font-variant: <valor>
Valores posibles: normal | small-caps
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-variant determina si la fuente se muestra en mayúsculas tipo normal o pequeñas small-caps. Las small-caps se muestran cuando todas las letras de la palabra están en mayúsculas, con caracteres ligeramente más grandes que las minúsculas. Posteriores versiones de CSS pueden soportar variantes adicionales como condensada, expandida, números en small-caps u otras variantes personalizadas. Un ejemplo de una asignación font-variant sería:

SPAN { font-variant: small-caps }

Font Weight (Peso de fuente)

Sintaxis: font-weight: <valor>
Valores posibles: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valor inicial: normal
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-weight se usa para especificar el peso de la fuente. Los valores bolder y lighter son relativos al peso de la fuente heredada, mientras que los otros valores son pesos de fuente absolutos.

Nota: Ya que no todas las fuentes tienen nueve posibles pesos de visualización, algunos de los pesos pueden agruparse en la asignación. Si el peso especificado no está disponible, se elegirá una alternativa sobre la base siguiente:

Algunos ejemplos de asignación de peso de fuente serían:

H1 { font-weight: 800 }
P  { font-weight: normal }

Font Size (Tamaño de fuente)

Sintaxis: font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>
Valores posibles:
  • <tamaño-absoluto>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <tamaño-relativo>
    • larger | smaller
  • <longitud>
  • <porcentaje> (en relación al elemento padre)

Valor inicial: medium
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font-size se usa para modificar el tamaño de la fuente mostrada. Las longitudes absolutas (usando unidades como pt y in) deberían usarse racionalmente debido a su poca capacidad de adaptarse a diferentes ambientes de navegación. Las fuentes con longitudes absolutas pueden ser fácilmente muy pequeñas o grandes para un usuario.

Algunos ejemplos de asignación de tamaño serían:

H1    { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Los autores deben estar concientes de que Microsoft Internet Explorer 3.x aplica incorrectamente las unidades em y ex como pixels, lo que puede hacer el texto ilegible. El navegador también aplica incorrectamente valores de porcentaje relativos al tamaño de fuente por defecto para el selector, en vez de en relación al tamaño de fuente del elemento padre. Esto hace que reglas como:

H1 { font-size: 200% }

sean peligrosas, por que el tamaño será dos veces el tamaño de la fuente por defecto de IE para encabezados de nivel-uno, en lugar de dos veces el tamaño de fuente del elemento padre. En este caso, BODY sería muy probablemente el elemento padre, y definiría posoblemente un tamaño de fuente medium, mientras que el tamaño de fuente para el encabezado de nivel uno aplicado por IE probablemente sería considerado xx-large.

Considerando estos defectos, los autores deberían tener cuidado al usar valores de porcentaje para for font-size, y probablemente deberían evitar unidades em y ex para esta propiedad.


Font (Fuente)

Sintaxis: font: <valor>
Valores posibles: [<font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height> ]? <font-family>
Valor inicial: No definido
Se aplica a: Todos los elementos
Heredado: Si

La propiedad font puede usarse como una forma rápida para las diferentes propiedades de fuentes, así como para line height. Por ejemplo,

P { font: italic bold 12pt/14pt Times, serif }

especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y una altura de línea de 14 puntos.


Mantenido por John Pozadzides y Liam Quinn


Web Design Group ~ ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS

Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.