- Empezamos con las propiedades de fuente. Se definen las siguientes propiedades:
font-family
: familia tipográfica (el nombre de la fuente)font-style
: estilo de fuente (normal, itálica, inclinada)font-variant
: variante (normal, versalitas)font-weight
: peso (normal, negrita)font-size
: tamaño de fuentefont
: una propiedad abreviada, que permite resumir todas las anteriores en una sola regla- Ok.
- font-family
toma como valores nombre de fuentes, en orden de preferencia. Si el nombre de la fuente contiene espacios, se entrecomilla. Al final de la lista conviene siempre poner un nombre de familia genérica que actúa como "red de seguridad", y que se refiere a un tipo general de fuente. Por ejemplo:
font-family : Georgia, "Times New Roman", Times, serif;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-family : "Courier New", courier, monospace;
Las familias genéricas son: 'serif' (p.ej. Times), 'sans-serif' (p.ej. Arial), 'cursive' (p.ej. Zapf-Chancery), 'fantasy' (p.ej. Western) y 'monospace' (p.ej. Courier).
- Bueno, vale...
- Seguimos. font-style
permite especificar si queremos que la fuente esté en itálica. Puede tomar los valores normal
, italic
y oblique
. Por ejemplo, ¿qué significa esto?
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
- Mmm, veamos, a ver si lo digo bien: que los contenidos de los elementos H1
, H2
y H3
se representarán en itálica, excepto los contenidos de los elementos EM
que sean descendientes de algún H1
, que se verán normal.
- ¡Muy bien! Muy bien. font-variant
puede tomar los valores normal
y small-caps
(versalitas).
- ¿Qué es eso?
- En una fuente con letras versalitas las letras minúsculas son similares a las mayúsculas, pero más pequeñas.
- Vale. Y con poner font-variant : small-caps
vale, ¿no?
- Sí, si hay alguna fuente disponible en el sistema para ello sí. Si no, es posible que simplemente salgan todas las letras en mayúscula.
- Ok.
- font-weight
puede tomar los valores normal
, bold
(negrita), bolder
(más negrita que el padre), lighter
(menos negrita que el padre), 100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
ó 900
.
- Eso sí que es raro.
- Sí. El valor 400
equivale a peso normal
, y el valor bold
equivale a 700
. Lo habitual es poner simplemente normal
o bold
.
- Me parece bien...
- font-size
permite especificar el tamaño de la fuente. Aquí hay bastantes opciones. Puede tomar los siguientes valores:
xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
;larger
(más grande), smaller
(más pequeño)2cm
(2 centímetros), 3em
(3 veces el tamaño normal), etc.150%
equivale a 1.5em
, o 1,5 veces el tamaño normal.Cuando hagas una hoja de estilo para pantallas, conviene usar valores que le resulten cómodos al usuario, porque como sabrás leer en la pantalla cansa más que leer de un papel. En general, lo mejor es no especificar ningún tamaño de fuente, y si especificas algo, que sea una medida relativa al tamaño normal: un múltiplo de em
, para que el usuario pueda escalar fácilmente los textos.
- ¿Qué es un em
?
- Es un término tipográfico. Simplificando, es la altura de la fuente.
- Ah.
- En CSS, cuando hablamos de longitudes, hablamos de un número y su unidad. No puedes decir que algo mide 6. ¿6 qué? ¿6 centímetros, 6 metros?
- Hombre, claro.
- Las unidades que se pueden usar son las siguientes: em
(la altura de la fuente), ex
(la altura de la letra x), px
(píxeles de pantalla), in
(pulgadas, una pulgada son 2,54cm), cm
(centímetros), mm
(milímetros), pt
(puntos, 72 puntos son una pulgada), y pc
(picas, 1pc=12pt). Para impresoras y otros medios las unidades absolutas son apropiadas (in
, cm
, mm
, pt
, pc
), pero para pantallas lo mejor es usar em
o medidas porcentuales, ya que no se sabe a cuántos píxeles equivale por ejemplo un centímetro. La unidad px
es un híbrido de medida absoluta y relativa, y de momento es aconsejable no utilizarla.
- Bueno, entonces no me quedan muchas opciones...
- La sintaxis es siempre el número y pegado a él la unidad. Se usa un punto decimal, no una coma decimal. Y cuando el número sea el cero, no hace falta unidad.
- Mmm, bastante lógico, sí.
- Bueno, pues seguimos. Finalmente, la propiedad font
es un compendio de las anteriores. Aquí tienes un ejemplo completo:
font : italic small-caps bold 1.5em/3em Arial, sans-serif
Los tres primeros valores (font-style
, font-variant
y font-weight
) son opcionales y pueden aparecer en cualquier orden. El cuarto (font-size
) es obligatorio. El quinto (line-height
, altura de línea) es opcional y si aparece debe estar precedido de una barra inclinada. Y al final se pone obligatoriamente la familia tipográfica (font-family
). Otro ejemplo más simple:
font : 80% monospace
- Muy bien.
- Vamos al siguiente grupo de propiedades.
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 14/10/2001 - © 2001 Juan R. Pozo y conclase.net