Guía del usuario Cancelar

Eventos de fuentes

Buscar

Última actualización el 3 may 2021

Los eventos de fuentes vienen incluidos con la carga de fuentes con JavaScript, que sirve para los subconjuntos dinámicos. Los eventos de fuentes le permiten personalizar su página web en función de si las fuentes están activas, se están cargando todavía o no están disponibles por algún motivo.

Los eventos de fuentes aún no están disponibles para la carga de fuentes con CSS. Si va a usar el código CSS incrustado predeterminado o el @import en su sitio web, podrá incluir otra biblioteca de JavaScript para personalizar su sistema de carga de fuentes.

Uso de eventos de fuentes en CSS

Para que le sea más fácil controlar mejor el aspecto de su página mientras las fuentes se cargan o si están inactivas, el código incrustado JavaScript cuenta con una serie de eventos de fuentes que se activan cuando las fuentes se cargan en la página.

Hay tres eventos de fuentes principales, cada uno de los cuales tiene un nombre de clase correspondiente (entre paréntesis):

loading (.wf-loading): las fuentes web se están cargando
active (.wf-active): las fuentes web están activas
inactive (.wf-inactive): las fuentes web no están activas

Las clases CSS asociadas a estos eventos se integran en el elemento HTML durante el proceso de carga. Las puede utilizar en sus hojas de estilo para determinar el estilo de la página cuando se cargan las fuentes. Por ejemplo:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Las aplicaciones de uso más comunes de las clases de eventos de fuentes son controlar el parpadeo de texto sin estilo (FOUT) y definir las fuentes y estilos alternativos en los navegadores que no admitan fuentes web o las tengan deshabilitadas. Siempre es una buena idea incluir fuentes y estilos alternativos, ya que algunas configuraciones de navegador, sistema operativo y preferencias de usuario hacen que las fuentes quedan inactivas en su página.

Eventos de fuentes con JavaScript

Estos eventos de fuentes también están disponibles como “hooks“ (función de enganche) de llamada de vuelta de JavaScript a través del método Typekit.load. Puede pasar un objeto que contenga funciones de llamada de vuelta cuando llame a Typekit.load y dichas funciones se invocarán como eventos de fuentes diferentes que se aplicarán mientras se carguen. Por ejemplo:

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

Las llamadas de vuelta de JavaScript se pueden usar para añadir elementos como fundidos cuando las fuentes se han cargado o para realizar un cambio de tamaño matemático complejo en diseños de presentación basados en las dimensiones del texto renderizado.

Además de estos eventos de fuentes básicos, también existen eventos de fuentes más específicos para variaciones de fuentes concretas. Los nombres de clases para estos eventos son el resultado de combinar el nombre de la familia de fuentes, la descripción de la variación de fuente y el nombre del evento de fuentes. Así, por ejemplo, si se añade un grosor normal con valor 400 de Gesta a un proyecto, esto daría lugar a clases de eventos de fuentes como wf-gesta-n4-loading y wf-gesta-n4-active. Con respecto a JavaScript, las llamadas de vuelta fontloading, fontactive y fontinactive están disponibles y se pueden pasar a la familia de fuentes y la descripción de la fuente para cada variación concreta.

Uso de eventos de fuentes: cómo ajustar el parpadeo de texto sin estilo (FOUT)

Cada navegador se ocupa de realizar la carga de fuentes web a su manera. Si en el navegador aparece al principio el texto con una fuente alternativa y luego cambia a las fuentes vinculadas después de que hayan terminado de cargarse, se producirá un parpadeo de texto sin estilo o FOUT.

Cuando se cargan las fuentes, la clase .wf-loading se aplica en el elemento HTML. Una vez que las fuentes se hayan cargado, esa clase pasa a .wf-active. En este sentido, podrá añadir lo siguiente a sus hojas de estilo:

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

Después, puede ajustar los estilos para hacer que el FOUT sea menos molesto; por ejemplo, asegurándose de que la fuente con parpadeo y la fuente web cargada parezcan que tengan el mismo tamaño. O también puede ocultar el texto hasta que la fuente termine de cargarse del todo. Por ejemplo:

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

En la sección de estilos de fuentes alternativas figuran más ejemplos sobre cómo aplicar estilos CSS con eventos de fuentes.

Uso de eventos de fuentes: estilos de fuentes alternativas

Las fuentes se cargan como recursos o activos en una página web, como lo serían imágenes o vídeos. Según el sistema operativo, navegador web, extensiones instaladas, preferencias del usuario y velocidad de conexión que se use de forma conjunta, es posible que las fuentes web no se carguen a veces. En estos casos, se usarán en su lugar las fuentes alternativas en la pila de CSS.

Por ejemplo, puede ajustar el tamaño de las fuentes alternativas al utilizar una fuente web condensada, de modo que el diseño y formato sea siempre el mismo aunque las fuentes web no lleguen a cargarse. El procedimiento es el siguiente:

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

Uso de eventos de fuentes: simulación del parpadeo de texto invisible (FOIT) para proyectos dinámicos

De forma predeterminada, los proyectos dinámicos renderizan el texto con estilo de fuente web por medio del parpadeo de texto sin estilo (FOUT). Esto significa que el navegador procesará las fuentes alternativas mientras las fuentes web se cargan y luego pasará a mostrar las fuentes web una vez que estén disponibles para usarse. Esto difiere del sistema alternativo para la renderización de fuentes web, a través del cual un navegador oculta el texto mientras se descargan las fuentes web y luego muestra el texto, con el estilo de la fuente web, una vez que las fuentes web se han cargado. Esto es lo que denomina parpadeo de texto invisible (FOIT).

El sistema FOUT hace que las páginas se carguen de forma más inmediata, especialmente si se tienen conexiones de red más lentas, pero si prefiere el sistema FOIT, puede simularlo en todos los navegadores mediante el uso de eventos de fuentes. Los eventos de fuentes son tres clases que se añaden al elemento:

.wf-loading: se añade mientras se cargan las fuentes;
.wf-active: se añade cuando se carga al menos una fuente;
.wf-inactive: se añade cuando no se carga ninguna de las fuentes.

Puede usar estas tres clases en su CSS para simular el procedimiento de carga mediante FOIT, ocultando el texto cuando la clase wf-loading está activa y haciendo que aparezca el texto cuando la clase wf-active o wf-inactive está activa:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Por ejemplo, si los elementos h1 y p usan una fuente web, utilice este CSS para ocultarlos mientras se cargan las fuentes.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

Páginas relacionadas

¿Por qué mis fuentes web proceden de use.typekit.net?

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?