gatsby omni font loader
v2.0.2
npm install gatsby-omni-font-loader react-helmet
o
yarn add gatsby-omni-font-loader react-helmet
Agregue el siguiente fragmento a la matriz de complementos gatsby-config.js .
{
/* Include plugin */
resolve : "gatsby-omni-font-loader" ,
/* Plugin options */
options : {
/* Font loading mode */
mode : "async" ,
/* Enable font loading listener to handle FOUT */
enableListener : true ,
/* Preconnect URL-s. This example is for Google Fonts */
preconnect : [ "https://fonts.gstatic.com" ] ,
/* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
custom : [
{
/* Exact name of the font as defied in @font-face CSS rule */
name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
/* Path to the font CSS file inside the "static" folder with @font-face definition */
file : "/fonts/fontAwesome/css/all.min.css" ,
} ,
] ,
/* Web fonts. File link should point to font CSS file. */
web : [ {
/* Exact name of the font as defied in @font-face CSS rule */
name : "Staatliches" ,
/* URL to the font CSS file with @font-face definition */
file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
} ,
] ,
} ,
} | Opción | Descripción | Por defecto |
|---|---|---|
| modo | Se puede configurar en async (predeterminado) o render-blocking . En el modo async , las fuentes se cargan de manera óptima, pero es visible. En el modo render-blocking Fout sucederá en casos raros, pero los archivos de fuentes se convertirán en bloqueo de renderizado. | asíncrata |
| alcance | Se puede configurar en body (predeterminado) o html . Establece el elemento de destino para los nombres de clase HTML a los que se aplicarán. | cuerpo |
| habilitador | Funciona en modo async . Habilitar el oyente de carga de fuentes para manejar el flash de texto sin estilo. Si está habilitado, las clases CSS se aplicarán a HTML una vez que cada fuente haya terminado de cargarse. | FALSO |
| intervalo (solo V1) | Funciona si enableListener es true . Intervalo del oyente de fuentes (en MS). El valor predeterminado es de 300 ms. Recomendado:> = 300 ms. | 300 |
| Tiempo de espera (solo V1) | Funciona si enableListener es true . Valor de tiempo de espera del oyente de fuentes (en MS). El valor predeterminado es 30s (30000 ms). El oyente ya no verificará las fuentes cargadas después del tiempo de espera, las fuentes aún se cargarán y mostrarán, sino sin manejar fout. | 30000 |
| costumbre | Configuración de fuentes autohostadas. Agregue archivos de fuentes y archivos CSS de fuentes a la carpeta static . Matriz de {name: "Font name", file: "https://url-to-font-css.path"} objetos. | [] |
| web | Configuración de fuentes web. El enlace del archivo debe apuntar al archivo Font CSS. Matriz de {name: "Font name", file: "https://url-to-font-css.path"} objetos. | [] |
| preconectar | URL utilizadas para meta de preconectación. URL base donde se alojan los archivos de fuentes . | [] |
| precargar | URL adicionales utilizadas para meta de precarga. La precarga para las URL proporcionadas en el atributo file de las fuentes custom y web se genera automáticamente. | [] |
Cargue hojas de estilo y archivos en modo de baja prioridad. Si desea agregar fuentes de forma rentable, maneje Fout por su cuenta y asegúrese de que los tiempos de renderizado de la página sean bajos, debe usar el modo async .
Pros: rendimiento, el contenido se muestra antes de descargar y analizar los archivos de fuente
Contras: Fout necesita ser manejado
Cargue hojas de estilo de fuente y archivos en modo de alta prioridad. Si desea utilizar este complemento como una forma simple de agregar fuentes a su proyecto como lo haría en cualquier otro proyecto, sin ninguna optimización de rendimiento y manejo de Fout, debe usar el modo render-blocking .
Pros: marcado simple, no ocurrirá en la mayoría de los casos
Contras: las hojas de estilo de fuente y los archivos de fuentes pueden retrasar el primer tiempo de pintura de contenido
Al cargar fuentes de forma asincrónica, podría ocurrir un flash de texto no establecido (fout) porque las fuentes cargan unos momentos más tarde después de que la página se muestra al usuario.
Para evitar esto, podemos usar CSS para diseñar la fuente alternativa para que coincida estrechamente con el tamaño de la fuente, la altura de la línea y el espaciado de las letras de la fuente principal que se está cargando.
Cuando enableListener: true se establece en la configuración del complemento en gatsby-config.js , las clases HTML se agregan al elemento <body> a medida que se están cargando las fuentes.
El formato de nombre de clase HTML estará en el siguiente formato wf-[font-family-name] . Cuando todas las fuentes están cargadas se aplica wf-all .
Puede usar el Matcher de estilo Font para ajustar la fuente de ventaja perfecta y la configuración CSS de alternativa.
Aquí está el ejemplo de cómo se verá el elemento body después de que se cargan todas las fuentes (dependiendo de la configuración).
< body
class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body > interval y timeout eliminadowf-[font-family-name] para evitar mezclar convenciones de nomenclatura Siéntase libre de informar los problemas que encuentra y no dude en contribuir al proyecto creando solicitudes de extracción.
¡Las contribuciones son bienvenidas y apreciadas!
¡Gracias por su contribución!
Henrik • Lennart • Francis Champagne • Hugo
¡Gracias por su apoyo!
Roboto Studio
