En este tutorial, vamos a aprender a trabajar con fonts en CSS.
La propiedad font puede combinar un número de diferentes sub-propiedades en una única declaración. Por ejemplo:
font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;Esto equivale a:
font-stretch: normal;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 120%;
font-family: "Helvetica", sans-serif;Veamos cada una de estas propiedades en detalle
Propiedades de CSS Font
font-family
La propiedad font-family establece la familia que usará la fuente.
La fuente seleccionada no es una única fuente sino de una «familia», ya que una fuente está compuesta de varías sub-fuentes, como por ejemplo negrita, cursiva, etc.
body {
font-family: Helvetica;
}El nombre de la familia de la fuente coincide o bien con una fuente embebida en la página o disponible en el sistema del usuario.
Podemos elegir varias familias como por ejemplo:
body {
font-family: Helvetica, Arial, sans-serif;
}En este caso, si la primera fuente no puede usarse, el navegador elegirá la siguiente. Eso puede suceder cuando no se encuentra en la máquina local o si el servidor que aloja esa fuente está caído.
Los tipos de fuente suelen clasificarse en Serif, Sans-Serif o Monospace. Estas son algunas de las más populares:
Serif: Georgia y Times New Roman.
Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande y Trebuchet MS
Monospace: Courier, Courier New y Lucida Console
line-height
La propiedad line-height establece la cantidad de espacio por encima y debajo de cada elemento.
p {
line-height: 1.5;
}También podemos usar los valores clave normal y none así como un número, longitud (cualquier unidad válida de CSS) o un porcentaje (siendo el tamño de fuente del elemento multiplicado por el tanto por ciento).
font-weight
La propiedad font-weight establece la anchura (o grosor) de cada uno de los caracteres de la fuente. Puedes usar los siguientes valores:
- normal
- bold
- bolder
- lighter
Ten en cuenta que bolder y lighter son relativos al elemento padre.
También pueden usarse valores numéricos
- 100
- 200
- 300
- 400 (equivalente a normal)
- 500
- 600
- 700 (equivalente a bold)
- 800
- 900
Siendo 100 la fuente las delgada y 900 la más gruesa.
Para que los valores que no son 400 o 700 tengan efecto, la fuente debe tener ‘faces’ incorporadas que coincidan con dicho numero.
font-stretch
Con font-stretch podemos una ‘face’ estrecha o gruesa de la fuente, asumiendo que la fuente usada contiene la ‘face’ correspondiente.
Los posibles valores son:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style
Lo propiedad font-style acepta uno de estos tres posibles valores: normal, italic o oblique.
Por ejemplo, para cambiar nuestra fuente a cursiva:
p {
font-style: italic;
}Hay muy poco diferencia entre usar italic o oblique. Ambas aplican un efecto de inclinación al texto.
font-size
La propiedad font-size se usa para determinar el tamaño de la fuente. Por ejemplo:
p {
font-size: 20px;
}Se puede usar un valor permitido (como px, em, rem, un porcentaje, etc. o una palabra clave predefinida. La palabras clave son:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
Siendo smaller y larger relativas al elemento padre.
Ten en cuenta que font-size es un valor obligatorio. Cuando usemos font, debe indicarse el tamaño o no tendrá efecto.
font-variant
La propiedad font-variant es casi una reliquia. Originalmente se usó para poner texto en mayúsculas más pequeñas, tiene tres posibles valores:
- normal
- inherit
- small-caps
small-caps deja el texto en mayúsculas, pero algo más pequeñas que las mayúscular normales.
Puedes leer el artículo original en inglés en:
https://itnext.io/css-fundamentals-understanding-fonts-82e9930528fa