Font
La propiedad
font
representa la declaración abreviada de font-style
, font-variant
, font-weight
, font-stretch
, font-size
, line-height
, font-family
.
Ejemplos:
/* font-size: 12px; line-height: 14px; font-family: sans-serif;*/
p { font: 12px/14px sans-serif }
/* font-size: 80% del tamaƱo de fuente del elemento padre; font-family: sans-serif;*/
p { font: 80% sans-serif }
/*Utiliza la misma fuente utilizada por la barra de estado de la ventana*/
p { font: status-bar }
font-style
La propiedad
font-style
establece si el texto tiene que utilizar un tipo de fuente normal, cursiva u oblicua.
font-style: normal | italic | oblique | oblique 40deg;
Ejemplos:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
Si
Dependiendo del valor utilizado el navegador busca el tipo de letra adecuado. Si no lo encuentra ( porque la familia de fuentes utilizada no tiene un tipo de fuente cursiva o inclinada ) el navegador prueba simularlo sesgando la fuente.
font-style: italic
el tipo de fuente utilizada es cursiva mientras que si font-style: oblique
el tipo de fuente utilizado es una versión inclinada de fuentes regulares.Dependiendo del valor utilizado el navegador busca el tipo de letra adecuado. Si no lo encuentra ( porque la familia de fuentes utilizada no tiene un tipo de fuente cursiva o inclinada ) el navegador prueba simularlo sesgando la fuente.
Podemos desactivar esta funcionalidad utilizando la propiedad
font-synthesis
: font-synthesis: none; /* el navegador no permite sintetizar ningĆŗn tipo de fuente */
font-synthesis: style; /* fuentes en cursiva pueden ser sintetizadas si necesario */
font-synthesis: weight; /* fuentes en negrita pueden ser sintetizadas si necesario */
font-synthesis: weight style; /* pueden sintetizarse tanto fuentes en cursiva como fuentes en negrita */
font-variant
En 99% de los casos la propiedad
font-variant
se emplea para decidir si utilizar o no una variante de fuente small-caps donde las minĆŗsculas se parecen a las mayĆŗsculas.
font-variant: normal | small-caps | inherit;
En CSS3 el significado de
font-variant
fue ampliado. Ahora la propiedad font-variant
representa la declaración abreviada de font-variant-ligatures
, font-variant-position
, font-variant-caps
, font-variant-numeric
, font-variant-alternates
.font-variant: small-caps;
font-weight
La propiedad
font-weight
especifica el grosor o el peso de la fuente.
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;
Esta es la teorĆa. En realidad las fuentes que utilizamos pueden no tener estos grosores. Si la fuente utilizada no tiene el grosor especificado el navegador selecciona al tipo que mĆ”s se le parece.
Ejemplos:
/* palabras clave – valores absolutas */
font-weight: normal;
font-weight: bold;
/* palabras clave – valores relativas */
font-weight: lighter;/* mƔs ligera que la fuente del elemento padre*/
font-weight: bolder;/* mƔs pesada que la fuente del elemento padre*/
/* valores numƩricos */
font-weight: 200;
font-weight: 600;
font-stretch
La propiedad
font-stretch
escoge un tipo de fuente normal, condensado o ampliado.
font-stretch: porcentaje | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
Si la fuente utilizada no tiene el tipo de fuente especificado la propiedad
font-stretch
no tendrĆ” ningĆŗn efecto.
Ejemplos:
/* palabras clave */
font-stretch: condensed;
font-stretch: normal;
font-stretch: expanded;
/* porcentajes */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
font-size
La propiedad
font-size
establece el tamaƱo de fuente.
font-size: tamaƱo | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller
El tamaƱo de fuente puede ser establecido con palabras clave o utilizando unidades de longitud como
px
, em
, rem
etc...
Ejemplos:
/* palabras clave – valores absolutas */
font-size: small; /* pequeƱa*/
font-size: medium; /*mediana*/
font-size: large; /*grande*/
/* palabras clave – valores relativas */
font-size: smaller; /*mƔs pequeƱo*/
font-size: larger; /*mƔs grande*/
/* unidades de longitud */
font-size: 12px;
font-size: 0.8em;
/* porcentajes */
font-size: 80%;
line-height
la propiedad
line-height
se utiliza para establecer la altura de lĆnea del texto.
line-height: normal | nĆŗmero | longitud | porcentaje
Ejemplos:
/* palabra clave */
line-height: normal;
/* valores sin unidades:
utilice este número multiplicado por el tamaño de fuente */
line-height: 3.5;
/* unidades de longitud */
line-height: 3em;
/* porcentajes */
line-height: 34%;
font-family
La propiedad
font-family
define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado.
Ejemplos:
/*dos familias de fuente mƔs una fuente genƩrica: monospace */
font-family: Courier, "Lucida Console", monospace;
/*fuentes genericas*/
font-family: serif;
font-family: sans-serif;
Las fuentes genƩricas definidas como
serif
, sans-serif
, cursive
, fantasy
, y monospace
son fuentes alternativas utilizadas en el caso en cual las otras fuentes fallan.
Si el nombre de fuente contiene espacios, hay que poner el nombre de fuente entre comillas:
Ojo: No hay que poner las fuentes genƩricas entre comillas ya que se trata de palabras clave.
"Lucida Console"
.Ojo: No hay que poner las fuentes genƩricas entre comillas ya que se trata de palabras clave.
La propiedad font-size-adjust
La propiedad
font-size-adjust
ajusta la proporción de la fuente.
font-size-adjust: tamaƱo | none | inherit;
Ejemplo:
.elemento {
font-size: 22px;
font-size-adjust: .5;
}
Todas las fuentes tienen la misma proporción ( aspect ratio ) que se calculada utilizando esta fórmula:
proporción = x-height / font-size
Donde
No todas las fuentes tienen la misma proporción y por esto fuentes que tienen el mismo tamaño
x-height
representa la altura de los caracteres en minúscula.No todas las fuentes tienen la misma proporción y por esto fuentes que tienen el mismo tamaño
font-size
pueden aparecer mƔs grandes o mƔs pequeƱas. Para que esto no pase podemos utilizar la propiedad font-size-adjust
para ajustar la proporción de la fuente.
A continuación una lista de fuentes y su proporción:
Font | Proporción |
---|---|
Arial | 0.52 |
Comic Sans | 0.53 |
Courier | 0.43 |
Courier New | 0.42 |
Georgia | 0.48 |
Helvetica | 0.52 |
Tahoma | 0.55 |
Times New Roman | 0.45 |
Verdana | 0.58 |
No hay comentarios.:
Publicar un comentario