La característica font define las características de las fuentes de nuestro texto que utilizamos en nuestra app o web.
Vamos a definir las características que engloba font
1. font-family: Define el tipo de fuente que vamos a utilizar. Tenemos que destacar que podemos indicar varios tipos separados entre comas, con la razón de que si nuestro sistema no soporta el tipo de fuente, intentará utilizar el siguiente tipo de fuente, así hasta poder escribir nuestro texto por el sisema.
Además cuando el nombre de tipo de letras esté formado por más de una palabra, el nombre estará escrito entre comillas.
Tipos de font-family
- serif
- sans-serif
- cursive
- monospace
- fantasy
- fangsong (chino)
- emoji
- math
2. font-size: Indicamos la medida de nuestras fuentes, podemos usar para especificar la medida palabras clave, podemos usar %, y podemos usar unidades.
Además cuando el nombre de tipo de letras esté formado por más de una palabra, el nombre estará escrito entre comillas.
Valores
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- unidades
- %
3. font-weight: Indicamos el espesor de las fuentes que vamos a usar. Como sucedía anteriormente definimos sus valores con palabras claves o valores numéricos.
Valores
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
4. font-style: Especificamos el estilo de nuestra fuente.
Valores
- normal
- italic
- oblique
5. font-variant: Indicamos si nuestra fuente estárá en mayúsculas o minúsculas.
Valores
- normal
- small-caps
6. font-stretch: Especificamos la separación de entre letra y letra de nuestra fuente.
Valores
- normal
- wider
- narrower
- ultra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
Además podemos usar la forma abreviado usando
font: font-style || font-variant || font-weight || font-stretch || font-size || font-family
Tenemos otras características que aunque todavía no se encuentran como estandar en todos los navegadores en alguno de ellos si se estan usando hace tiempo, pero para su uso deberiamos comprobar ne CanIUse en que navegador usar, font-size-adjust, font-kerning, font-rendering-controls .....
Códigos de ejemplo
See the Pen font by Bernardo Martin (@bermartinv) on CodePen.
Para comenzar y jugar un poco con las características de font puedes ir a nuestra herramienta (Pulsa aquí).
Además otra manera que tenemos para usar fuentes nuevas es usando la regla @fontface. (Si quieres más información sobre @fonface pulsa aquí)
