Evita el destello de texto invisible

Katie Hempenius
Katie Hempenius
X

En este codelab, aprenderás a mostrar texto de inmediato con Font Face Observador.

Cómo agregar Font Face Observer

Font Face Observer es una secuencia de comandos que detecta cuando se carga una fuente. El fontfaceobserver.js ya se guardó en el directorio del proyecto, por lo que no necesitas agregarlo por separado. Sin embargo, debes agregarle una etiqueta de secuencia de comandos.

  • Haz clic en Remix para editar para que el proyecto se pueda editar.
  • Agrega una etiqueta de secuencia de comandos para fontfaceobserver.js a index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Cómo usar Font Face Observer

Crea observadores

Crea un observador para cada familia de fuentes que se utiliza en la página.

  • Agrega la siguiente secuencia de comandos después de la secuencia de comandos fontfaceobserver.js. Esto crea observadores del "Pacífico" y "Roboto" familias de fuentes:
  <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 alguna vez no estás seguro de qué tipo de observador de fuente necesitas crear, solo tienes que buscar 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 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'). Las horas y la serif son fuentes de resguardo, por lo que no necesitarás declarar FontFaceObservers para ellas.

Detecta la carga de fuentes

El código para detectar una carga de fuente se ve de la siguiente manera:

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(). que espere hasta que se carguen ambas fuentes.

  • Agrega esta promesa a tu secuencia de comandos, justo debajo del FontFaceObservers que acaba de declarar:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Registro

Tu 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 hayan cargado ambas fuentes.

✔️Registro

La secuencia de comandos completa 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 aplicar un estilo a tu página para que utilice inicialmente una fuente de sistema y fuentes personalizadas una vez Se aplicó 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 pantalla completa

Si la página se ve así, significa que Font Face se implementó correctamente. observador y se deshizo del “destello del texto invisible”.

Un encabezado en letra cursiva.