Hacker of the Web
Tus ideas en código!...y mas

Tipografia en CSS

Como ya antes había publicado, el uso de fuente va muy ligado a la página y al tema de la misma, siempre sin descuidar el tamaño de la fuente. Aquí veremos como implementar la fuente de tu elección en una página web mediante CSS.

Al definir una fuente en CSS, para un selector cualquiera, se utiliza la siguiente propiedad o atributo:

selector {
font:oblique small-caps 900 12px/14px arial;
}

Que puede ser desglosada de la siguiente manera, es decir, lo de aqui abajo es exactamente lo mismo:

selector {
font-style:oblique;
font-variant:small-caps;
font-weight:900;
font-size:12px;
line-height:14px;
font-family:arial;
}


font-style: Es el estilo con el que se muestra la fuente, tiene cuatro opciones:
inherit: Hereda la fuente
normal: Muestra la fuente sin cambios
oblique: Muestra la fuente en cursiva
italic: Muestra la fuente en cursiva


font-variant: Indica si el texto debe mostrarse solo en mayusculas, tiene dos opciones:
small-caps: Muestra todas las letras en Mayúsculas, pero las anteriormente mayúsculas se muestran mas grande que las demás.
normal: No hace ningún cambio


font-weight: Es el ancho con que se muestra la fuente, tiene cinco opciones:
de 100 a 900: El 100 es lo mas delgado, mientras 900 lo mas grueso
lighter: En referencia al elemento padre muestra la fuente mas delgada
bolder: En referencia al elemento padre muestra la fuente mas gruesa
bold: Muestra la fuente gruesa
normal: Muestra la fuente normal


font-size: Modifica el tamaño de la fuente, tiene varias opciones:
xx-small, x-small, small, medium, large, x-large, xx-large: Medidas de fuente siendo xx-small la mas pequeña y xx-large la mas grande.
larger: En referencia al elemento padre muestra la fuente mas grande
smaller: En referencia al elemento padre muestra la fuente mas chica
Tambien se pueden usar medidas absolutas(px,em,%)


line-height: El tamaño de la linea, con varias opciones:
Pueden usarse medidas absolutas(px,em,%)
normal: una o dos veces el tamaño actual de la letra.


font-family: El nombre de la fuente, puede ser cualquier fuente, si son mas de una deben estar separados por una coma, y si lleva espacios debe estar entre comillas.

CSS y Javascript


Para modificar el tipo de fuente o cualquier propiedad de la misma, en javascript, debes eliminar los guiones(-) y de la segunda palabra la primer letra debe estar en mayuscula, ejemplo:

#selector {
font-weight:900;
}

En javascript sería algo así:
getElementById('selector').style.fontWeight="900";
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

Sé el primero y comenta !


Página Principal
Arriba