En este codelab, se muestra cómo mostrar texto de inmediato con Font Face Observer.
Agrega un observador de caras de fuente
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 es necesario que lo agregues por separado. Sin embargo, debes agregar una etiqueta de secuencia de comandos para ello.
- Haz clic en Remix para editar para que el proyecto sea editable.
- Agrega una etiqueta de secuencia de comandos para
fontfaceobserver.js
aindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Usa Font Face Observer
Crea observadores
Crea un observador para cada familia de fuentes que se use 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 no sabes qué observadores 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ías FontFaceObserver('Times New Roman')
. Times y Serif son fuentes de resguardo, por lo que no es necesario declarar FontFaceObservers para ellas.
Cómo detectar la carga de fuentes
El código para detectar una carga de fuente se ve así:
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 a que se carguen ambas fuentes.
- 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
Tu secuencia de comandos ahora 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");
Esto agrega la clase fonts-loaded
al elemento raíz del documento (la etiqueta <html>
) una vez que se hayan cargado 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>
Actualiza el CSS
Tu página debe tener un diseño para usar una fuente del sistema inicialmente 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, significa que implementaste correctamente el observador de fuentes y te deshiciste del "flash de texto invisible".