En la cabecera <head> de la página hay que:
Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:
Al volver a aplicar la hoja de estilo no se identifican más etiquetas, pero puesto que los párrafos no son todos iguales, es que hay varias clases de párrafos <p>.
En total, se necesitan tres clases de párrafo <p>:
Los tipos de letra son también diferentes en cada una de estas clases.
En este ejercicio se utilizará la regla-arroba @font-face, para enlazar las siguientes fuentes en nuestro propio ordenador:
Para facilitar la realización del ejercicio, en el archivo de plantilla comprimido se han incluido las fuentes en formato woff y en formato woff2, pero como esas fuentes están disponibles en Google Fonts, se recomienda al alumno que las descargue por su cuenta para comprobar que sabe hacerlo.
Se han incluido los formatos woff y woff2 para que compruebe la diferencia de tamaño de los ficheros.
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Citas de Virgilio (Web Fonts) y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Citas de Virgilio (Web Fonts).
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.