- Guía del usuario de Adobe Fonts
- Introducción
- Licencias de fuentes
- Licencias de fuentes
- Administrar la cuenta
- Licencias para clientes de Creative Cloud para empresas
- Añadir licencias de fuentes a la cuenta
- Eliminación de fuentes de la biblioteca de suscripción
- Adobe Fonts no está disponible para Adobe ID registrados en China
- ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
- Retirada de fuentes de Morisawa en septiembre de 2021
- Obtener y usar fuentes
- Uso de Adobe Fonts en las aplicaciones de Creative Cloud
- Administrar las fuentes
- Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
- Uso de fuentes en InDesign
- Fuentes y tipografía
- Uso de fuentes web en documentos HTML5 Canvas
- Uso de fuentes en InCopy
- Cómo usar fuentes en Adobe Muse
- Uso de fuentes web en Muse
- Empaquetar archivos de fuentes
- Guía de solución de problemas: añadir fuentes
- Las fuentes añadidas no aparecen en el menú de fuentes
- “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
- ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
- Diseño y desarrollo web
- Añadir fuentes al sitio web
- Guía de solución de problemas: Añadir fuentes a un sitio web
- Uso de fuentes web en correos electrónicos HTML o newsletters
- Uso de fuentes web con Accelerated Mobile Pages (AMP)
- Selectores CSS
- Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
- Códigos incrustados
- Subconjuntos dinámicos y alojamiento de fuentes web
- Eventos de fuentes
- ¿Por qué mis fuentes web proceden de use.typekit.net?
- El sitio no puede conectarse a use.typekit.net
- Uso de fuentes web con CodePen
- Compatibilidad con navegadores y sistemas operativos
- Dominios
- Uso de fuentes web al desarrollar de forma local
- Política de seguridad de contenido
- Impresión de fuentes web
- Compatibilidad con idiomas y funciones OpenType
- Tecnología de fuentes
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
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea