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 |
0 Comentarios