Css Tipografía avanzada

El navegador del usuario va a descargar automáticamente (sin que se vea) el archivo de la fuente. Ese archivo puede llegar a pesar 1mb.
*No vale la pena cargar muchas tipografias porque ralentizaría la web.
*Se ha de mirar bien si las tipografias descargadas de Internet son legales.

https://www.fontsquirrel.com/
- En el filtro hay que ir a "webfont" que son las que traen el paquete de varios formatos para adaptarlo a todos los navegadores.
- Escoger una de las fuentes.
- Ir a la pestaña "Webfont Kit"
- Descargar el zip.
- Descomprimir.
- Buscar los archivos que nos interesen.

Ejemplo:

Tipografía básica:

Definir tipografía en el css

Añadirla a etiqueta deseada:

Resultado:


Tipografía avanzada:
*La que nos dan en el archivo preparado de css.
*Hay que prepararla bien, poniendo correctamente la carpeta donde está el archivo y el nombre de la fuente que queramos.

Css Tipografía (font-family)

Las más comunes que no darán ningún problema:


Definir varias fuentes para preveer que alguna no esté disponible.
Ejemplo: font-family: arial, verdana, tahoma;
*La Times New Roman es la que sale por defecto.

Css Mayúsculas (text-transform)

Transforma el texto en mayúsculas o minúsculas.


Css Sangría primera línea (text-indent)

Píxeles: 5px;
EM: 5em;


Css Espaciado (letter-spacing y word-spacing)

Se define con valor numerico:
- Píxel: 2px;
- EM: 0.3em


Css Negritas (font-weight)

Grosor con el que se van a mostrar las letras del texto.
*Por números puede ir de 100 (grosor pequeño) a 900 (grosor grande).