| Sintaxis: | font-family: [[<nombre de familia> | <familia genérica>],]* [<nombre de familia> | <familia genérica>] |
|---|---|
| Valores posibles: | <nombre-de-familia>
|
| 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.
| 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 }| 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 }| 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 }| Sintaxis: | font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje> |
|---|---|
| Valores posibles: |
|
| 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.
| 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
ÍndiceCSS ~ Estructura CSS ~ Propiedades CSS
Copyright © 1997 John Pozadzides y Liam Quinn. Todos los derechos reservados.