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:
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
<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
Los posibles valores para definir las familias de fuentes genérico
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
<style="type:text/css">
selector {font-weight: valor}
</style>
</head>
Los posibles valores para definir los fondos
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
<style="type:text/css">
selector {font-style: valor1}
</style>
</head>
Los posibles valores para definir los estilos
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
<style="type:text/css">
selector {font-size: valor}
</style>
</head>
Los posibles valores para definir el tamaño de las fuentes
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
<style="type:text/css">
selector {font-variant: valor}
</style>
</head>
Los posibles valores para definir las variantes de las fuentes
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
<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
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
| Propiedad | Descripción | Valores | Detalles | Ej. |
|---|---|---|---|---|
| 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 | Tamaño de la fuente | |||
| font-family | Familia de fuentes | |||
| 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 | |
| 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 | |
| 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 |
<<< Textos - Text en CSS Contornos - Outline en CSS >>>