![](http://1.bp.blogspot.com/_hljKDuw-cxQ/R7HnNsjv9BI/AAAAAAAAFJE/M9MjfbMGVq8/s00/cssdemo1.gif)
Las propiedades que nos permiten personalizar los textos de una página
web son muchas, algunas las usamos habitualmente pero hay otras que son bastante desconocidas.
Para empezar, hay una propiedad genérica que ayuda a definir varias propiedades de manera simultánea. La propiedad
font es una forma reducida de establecer font-style, font-variant, font-weight, font-size, line-height y font-family.
sintaxis en HTML
elemento {font: valores;}por ejemplo: div {font: italic small-caps bold 12pt serif;}
sintaxis en JAVASCRIPT
elemento.style.font='valores';por ejemplo: this.style.font='italic small-caps bold 12pt serif';
Donde cada valor se separa del otro mediante un espacio.
Por defecto, su valor es:
normal normal normal medium normal "Times New Roman" y es una propiedad que se "hereda", es decir, si un elemento contiene a otro, el contenido tendrá las mismas propiedades que el contenedor.
Veamos una por una.
La propiedad
font-family establece el nombre de la fuente de los textos.
sintaxis en HTML
elemento {font-family: valor;}por ejemplo: div {font-familiy: arial, sans-serif;}
sintaxis en JAVASCRIPT
elemento.style.fontFamily='valor';por ejemplo: this.style.fontFamily='arial, sans-serif';
Una "familia" es un grupo de fuentes de características similares. Cada "miembro" de la familia puede ser cursiva, negrita, condensada, etc. Las familias de fuentes pueden ser agrupadas en categorías: con o sin serif, con o sin caracteres espaciados proporcionalmente, etc.
Cualquier nombre de una fuente válida es aceptado; por ejemplo:
Times, Helvetica, Zapf-Chancery, Western, Courier
También pueden usarse nombres genéricos:
serif, sans-serif, cursive, fantasy o monospace
El valor puede ser también una lista separada por comas y para evitar confusiones, los nombres que tienen varias palabras se deben escribir entre comillas. Las listas se utilizan porque no podemos saber cuáles son las fuentes instaladas en el navegador de quien va a mirar la página y por eso, establecemos alternativas; si se encuentra la primera, se mostrará esa, sino, la segunda y así sucesivamente siendo lo más prudente, terminar con un nombre genérico.
La propiedad
font-size establece el tamaño de la fuente de texto.
sintaxis en HTML
elemento {font-size: valor;}por ejemplo: div {font-size: 12px;}
sintaxis en JAVASCRIPT
elemento.style.fontSize='valor';por ejemplo: this.style.fontSize='12px';
Los valores que podemos utilizar son muy variados; pueden ser: xx-small, x-small, small, medium, large, x-large, xx-large. También se puede utilizar smaller o larger para indicar una fuente de un tamaño inmediatamente menor o inmediatamente mayor.
Lo más común es utilizar unidades fijas o proporcionales: cm, mm, in, pt, pc, px, em o ex o un porcentaje.
La propiedad
font-style establece el estilo de la fuente.
sintaxis en HTML
elemento {font-style: valor;}por ejemplo: div {font-style: italic;}
sintaxis en JAVASCRIPT
elemento.style.fontStyle='valor';por ejemplo: this.style.fontStyle='italic';
Los valores posibles son: normal, italic u oblique.
La itálica es la versión cursiva del tipo normal. La oblicua es una versión inclinada del tipo normal y comúnmente se usa con las sans-serif.
La propiedad
font-variant establece si la fuente se muestra en modo mayúsculas pequeñas. Es decir, todos los caracteres se convierten en mayúsculas pero el tamaño es menor que el tamaño de la fuente normal.
sintaxis en HTML
elemento {font-variant: valor;}por ejemplo: div {font-variant: small-caps;}
sintaxis en JAVASCRIPT
elemento.style.fontVariant='valor';por ejemplo: this.style.fontVariant='small-caps';
Los valores posibles son: normal o small-caps.
La propiedad
font-weight establece el grosor de las fuentes.
sintaxis en HTML
elemento {font-weight: valor;}por ejemplo: div {font-weight: 900;}
sintaxis en JAVASCRIPT
elemento.style.fontWeight='valor';por ejemplo: this.style.fontWeight='900';
Los valores posibles son: normal , lighter, bold y bolder. También pueden usarse algunos valores numéricos: 100, 200, 300, 400, 500, 600, 700, 800 y 900 donde 400 equivale a normal y 700 a bold.
Las variaciones dependen del tipo de fuente y muchas veces es difícil notar las diferencias.
Las dos propiedades que faltan son bastante desconocidas.
La propiedad
font-size-adjust también establece el tamaño de la fuente; en realidad, el tamaño y la legibilidad de una fuente depende menos del valor dado a font-size que de la proporción entre su ancho y su alto. Esa relación (tamaño de la fuente dividido por la altura de la letra x), es llamada x-height. Cuanto más grande sea ese valor menos legible será la fuente si se trata de fuentes pequeñas.
sintaxis en HTML
elemento {font-size-adjust: valor;}por ejemplo: div {font-size-adjust: 0.8;}
sintaxis en JAVASCRIPT
elemento.style.fontSizeAdjust='valor';por ejemplo: this.style.fontSizeAdjust='0.8';
Los valores posibles son: none o un número que especifica esa relación.
Esta imagen muestra varias tipografías en un mismo tamaño de fuente (11pt. a 72 ppi), junto con sus valores de relación
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/RkE2bscd1gI/AAAAAAAAAV0/eTXRH4GMY8g/s320/ImgExterna.gif)
Esta otra imagen muesta el resultado de font-size-adjust
![](http://3.bp.blogspot.com/_hljKDuw-cxQ/RkE2bscd1gI/AAAAAAAAAV0/eTXRH4GMY8g/s320/ImgExterna.gif)
La propiedad
font-stretch permite condensar o estrechar una fuente; selecciona un tipo normal, condensado o expandido de una familia de fuentes.
sintaxis en HTML
elemento {font-stretch: valor;}por ejemplo: div {font-stretch: ultra-expanded;}
sintaxis en JAVASCRIPT
elemento.style.fontStretch='valor';por ejemplo: this.style.fontStretch='ultra-expanded';
Los valores posibles son: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded o ultra-expanded donde ultra-condensed es más estrecho y ultra-expanded es el más ancho.
También pueden usarse las palabras clave wider o narrower. wider modifica el valor al siguiente más expandido mientras que narrower lo hace al siguiente más condensado.