En este codelab, aprenderás a mostrar texto de inmediato usando Font FaceObserver.
Cómo agregar Font Face Observer
Font Face Observer es una secuencia de comandos que detecta cuándo se carga una fuente. El archivo fontfaceobserver.js
ya se guardó en el directorio del proyecto, por lo que no necesitas agregarlo por separado. Sin embargo, sí debes agregarle una etiqueta de secuencia de comandos.
- Haz clic en Remix to Edit para que el proyecto sea editable.
- Agrega una etiqueta de secuencia de comandos para
fontfaceobserver.js
enindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Cómo usar Font Face Observer
Crear observadores
Crea un observador para cada familia de fuentes que se usa en la página.
- Agrega la siguiente secuencia de comandos después de la secuencia de comandos
fontfaceobserver.js
. Esto crea observadores para las familias de fuentes “Pacifico” y “Roboto”:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Si en algún momento no sabes bien qué observadores de facetas de fuente debes crear, busca las declaraciones font-family
en tu CSS. Pasa el nombre font-family
de estas declaraciones a FontFaceObserver()
. No es necesario crear un observador de fuentes para las fuentes de resguardo.
Por ejemplo, supongamos que tu CSS tiene las siguientes características:
font-family: "Times New Roman", Times, serif;
agregarás FontFaceObserver('Times New Roman')
. Los Times y serif son fuentes de resguardo, por lo que no necesitas declarar FontFaceObservers para ellos.
Detecta la carga de la fuente
El código para detectar una carga de fuente tiene el siguiente aspecto:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
es una promesa que se resuelve cuando se carga la fuente.
El sitio de demostración usa dos fuentes diferentes, por lo que debes usar Promise.all()
para esperar hasta que se hayan cargado ambas.
- Agrega esta promesa a tu secuencia de comandos, justo debajo de los FontFaceObservers que acabas de declarar:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Registro
La secuencia de comandos debería verse de la siguiente manera:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
Aplicar la clase fonts-loaded
- Reemplaza el comentario
/* Do things */
en la secuencia de comandos por esta línea:
document.documentElement.classList.add("fonts-loaded");
De esta manera, se agrega la clase fonts-loaded
al elemento raíz del documento (la etiqueta <html>
) una vez que se cargan ambas fuentes.
✔️Registro
La secuencia de comandos completada debería verse de la siguiente manera:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
Actualizar CSS
Se debe diseñar tu página para que, al principio, use una fuente del sistema y fuentes personalizadas una vez que se haya aplicado la clase fonts-loaded
.
- Actualiza el CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Verificar
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
Si la página se ve de esta manera, quiere decir que implementaste correctamente Font Face Observaer y te deshaces del "Flash of Invisible Text".