Actividades Informes técnicos Índice del sitio Traducciones Software Búsqueda Relacionado: Estilos CSS Trucos y sugerencias
Bert Boscreado el 17 de enero de 2001;
última actualización $Date: 2007/01/15 13:04:18 $ GMT
Este documento es una traducción del tutorial "Font families" propiedad de Bert Bos publicado en el sitio de W3C.
La versión en inglés de esta especificación es la única con valor normativo y puede encontrarse en: http://www.w3.org/Style/Examples/007/fonts.html
(Esta página usa hojas de estilo CSS)
Probablemente, la propiedad más básica de una página, después del color, es la fuente usada. En esta página no mostraré ningún "truco", pero sí la amplitud de variaciones de fuentes que permite CSS.
Puesto que no todas las fuentes están disponibles en todas las computadoras (hay miles de fuentes, y la mayoría no son gratuitas), CSS ofrece un mecanismo para indicar fuentes alternativas. Se indica primero la fuente deseada y a continuación todas las que puedan suplir a la primera, si no estuviera disponible; la lista se debería terminar con una fuente genérica, de las cinco que existen: serif, sans-serif, monospace, cursive y fantasy.
El cuadro siguiente muestra ejemplos de diversas fuentes (puede que su navegador no conozca algunas de ellas) y también permite ver cómo interpreta su navegador cada una de las cinco fuentes genéricas:
| "sans-serif": fuentes normales sin remate (serif) | |
|---|---|
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucida, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Helvetica Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| "serif": fuentes normales con remate (serif) | |
Times, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Palatino, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
Bookman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
New Century Schoolbook, serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
serif
| The Quick Brown Fox Jumps Over The Lazy Dog |
| "monospace": fuentes de ancho fijo | |
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Lucidatypewriter, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
Fixed, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog |
| "cursive": fuentes que imitan la escritura manual | |
Comic Sans, Comic Sans MS, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Zapf Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Coronetscript, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Florence, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
Parkavenue, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog |
| "fantasy": fuentes decorativas, para títulos y otros usos | |
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Arnoldboecklin, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Oldtown, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
Brushstroke, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog |
La mayoría de las fuentes tienen varios estilos dentro de una misma familia: suele haber un estilo en negrita y otro en cursivas; a menudo también uno de negrita cursiva; menos frecuentemente, un estilo de versales y, en unos pocos casos, versiones extrafinas/extragruesas o estiradas/comprimidas.
El siguiente cuadro muestra algunos estilos diferentes. A menos que en su computadora disponga de una colección de fuentes realmente nutrida, muchas de las filas se verán iguales.
| regla | serif | sans-serif | |||
|---|---|---|---|---|---|
| Estilos | |||||
font-style: normal
| The Quick… | The Quick… | |||
font-style: italic
| The Quick… | The Quick… | |||
font-style: oblique
| The Quick… | The Quick… | |||
| Grosores | |||||
font-weight: 100
| The Quick… | The Quick… | |||
font-weight: 200
| The Quick… | The Quick… | |||
font-weight: 300
| The Quick… | The Quick… | |||
font-weight: normal
| The Quick… | The Quick… | |||
font-weight: 500
| The Quick… | The Quick… | |||
font-weight: 600
| The Quick… | The Quick… | |||
font-weight: bold
| The Quick… | The Quick… | |||
font-weight: 800
| The Quick… | The Quick… | |||
font-weight: 900
| The Quick… | The Quick… | |||
| Variantes | |||||
font-variant: normal
| The Quick… | The Quick… | |||
font-variant: small-caps
| The Quick… | The Quick… | |||
| Estiramiento | |||||
font-stretch: ultra-condensed
| The Quick… | The Quick… | |||
font-stretch: extra-condensed
| The Quick… | The Quick… | |||
font-stretch: condensed
| The Quick… | The Quick… | |||
font-stretch: semi-condensed
| The Quick… | The Quick… | |||
font-stretch: normal
| The Quick… | The Quick… | |||
font-stretch: semi-expanded
| The Quick… | The Quick… | |||
font-stretch: expanded
| The Quick… | The Quick… | |||
font-stretch: extra-expanded
| The Quick… | The Quick… | |||
font-stretch: ultra-expanded
| The Quick… | The Quick… | |||
En CSS3, existe un estilo más: "font-effect", para hacer que las letras aparezcan en altorrelieve o bajorrelieve.
Actividades Informes técnicos Índice del sitio Traducciones Software Búsqueda Relacionado: Estilos CSS Trucos y sugerencias
Bert Bos