Tutorial css Sobre Fuentes para Principiantes
FUENTES
En esta leccion veremos los siguientes parámetros:
- font-family
- font-style
- font-variant
- font-weight
- font-size
font-family
familia de fuentes
Sirva para hacer una lista ordenada de las fuentes que queramos que aparezcan en nuestra web o en un elemento determinado
Las
fuentes se pueden dividir en 3 familias que son Serif, Sans-Serif y
Monospace. La serif tiene adornos por así decirlo; Sans-Serif es sin
adornos; y la monospace es que todos los caracteres ocupan un mismo
espacio, un espacio una “i” y una “m” ocupan lo mismo como si fuera una
maquina de escribir. Para que lo veáis mejor dejo una imagen con las
diferencias:
A
la hora de hacer una lista de las fuentes que queremos usar pondremos
primero nuestra fuente preferida, luego otra o las que se quieran por
si no tiene esa instalada, no tienen porque ser alguna de la imagen lo
único identificar a que familia pertenece, y por ultimo pondremos a la
familia a la que pertenecen por si el usuario no tiene ninguna de las
fuentes que queremos instaladas en su pc pondrá una de la misma familia
que tenga instalada en el pc.
NOTA: es aconsejable poner siempre de la misma familia.
Veamos un ejemplo
Vemos que todos los titulos h1 se verán con la fuente verdana, si esta
fuente no esta instalada en el ordenador se verán con la fuente arial y
en el caso de que tampoco estuviese instalada se mostraría con
cualquier fuente de la familia sans-serif.
Fijaros también como
he puesto “Time New Roman” entre comillas esto es por la fuente tiene
espacios y por eso hay que ponerselas.
Font-style
Estilo de la fuente
Esta
propiedad define la fuente con el valor normal, italic o oblique.
Normal aparece la fuente tal y como es y las otras dos italic y oblique
son para ponerlas en cursiva la mayoría de las fuentes y navegadores no
diferencian entre italic y oblique pero la diferencia es:
Oblique: simplemente inclina la letra sin cambiarla
Italia: ademas de inclinarla cambia la forma de algunas letras las que mas se notan son la “a” y la “g”
Pero recalco que la mayoría de las fuentes y navegadores no diferencian una de otra por lo que dará lo mismo poner una que otra
ont-variant
Variante de fuente
Se
usa para elegir entre las variantes normal o small-caps (versalita) de
una fuente. La fuente a la que se le aplica el valor small-caps se vera
la mayuscula normal y las siguientes en vez de ser minúsculas serán
mayúsculas pero mas pequeñas. Pongo una imagen para que lo veas mas
claro:
Ejemplo:
Font-weight
Peso de la fuente
La
propiedad font-weight indica que intensidad o peso en negrita queremos
que tenga la fuente. Todas las fuentes pueden tener el valor de normal
o bold, ademas en algunos navegadores nos permitira indicar una
intensidad entre los valores 100 y 900 con valores de cien en cien.
Ejemplo:
Los h1 aparecerán en negrita
Font-size
Tamaño de la fuente
El tamaño de la fuente se establece por medio de la propiedad font-size.
A
la hora de describir el tamaño de las fuentes, existen muchas unidades
diferentes (por ejemplo, píxeles y porcentajes) entre las que elegir.
En el ejemplo podemos incluir varias:
Sobre las unidades solo explicare que “px” y “pt” establecen el tamaño
de la fuente de forma absoluta y “%” y “em” permiten al usuario ajustar
el tamaño de la misma. Muchos usuarios son discapacitados, mayores o
sufren de disminuación visual, o disponen de un monitor de mala
calidad. Para que tu sitio web sea accesible para todo el mundo, deberías usar unidades ajustables como, por ejemplo, “%”o “em”.
Os pongo una imagen para que podais ver como ajustar el tamaño de la fuente en Firefox y en IExplorer:
Compártelo
También te puede interesar...
Comentarios
Escribe un comentario
Accede a tu cuenta o regístrate en NotasWeb.com.
No hay comentarios.