Download gatsby omni font loader - gatsby omni font loader Download do código -fonte

gatsby omni font loader

Baixar fonte

v2.0.2

Baixar

Gatsby Omni Font Loader v2

Maneira simples de adicionar webfonts ou fontes personalizadas ao projeto Gatsby
O carregamento de fonte assíncrona performente pode ser ativado
O ouvinte de carregamento de fontes pode ser ativado
Flash de suporte de manuseio de texto não sincero (FOUT)

Características

Suporta fontes da web e fontes auto-hospedadas
Pré -carrega os arquivos e a preconetos para o URL
Carrega fontes de forma assíncrona para evitar o bloqueio de renderização
Implementado com trechos de carregamento rápido
Carregando o ouvinte de status para evitar o FOUT
Tamanho pequeno e pegada mínima

Instalar

npm install gatsby-omni-font-loader react-helmet

ou

yarn add gatsby-omni-font-loader react-helmet

Configuração

Adicione o seguinte snippet à matriz de plug-ins 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" ,
      } ,
    ] ,
  } ,
}

Opções

Opção	Descrição	Padrão
modo	Pode ser definido como `async` (padrão) ou `render-blocking` . No modo `async` , as fontes são carregadas de maneira ideal, mas o FOUT é visível. No modo `render-blocking` o FOUT acontecerá em casos raros, mas os arquivos de fontes se tornarão bloqueios de renderização.	assíncrono
escopo	Pode ser definido como `body` (padrão) ou `html` . Define o elemento de destino para os nomes de classes HTML a serem aplicados.	corpo
enableListener	Funciona no modo `async` . Habilite a fonte carregando o ouvinte para lidar com o flash de texto sem seleção. Se ativado, as classes CSS serão aplicadas ao HTML assim que cada fonte terminar de carregar.	falso
intervalo (somente V1)	Funciona se `enableListener` for `true` . Intervalo do ouvinte da fonte (em MS). O padrão é 300ms. Recomendado:> = 300ms.	300
Tempo limite (somente V1)	Funciona se `enableListener` for `true` . Timeout do ouvinte do ouvinte da fonte (em MS). O padrão é 30s (30000ms). O ouvinte não verificará mais as fontes carregadas após o tempo limite, as fontes ainda serão carregadas e exibidas, mas sem lidar com o FOUT.	30000
personalizado	Fontes auto-hospedadas configurar. Adicione arquivos de font e arquivos CSS da fonte à pasta `static` . Array de `{name: "Font name", file: "https://url-to-font-css.path"}` objetos.	`[]`
web	Config de fontes da web. O link do arquivo deve apontar para o arquivo CSS da fonte. Array de `{name: "Font name", file: "https://url-to-font-css.path"}` objetos.	`[]`
Preconect	URLs usados para meta pré -conectada. URL base onde os arquivos de fonte estão hospedados.	`[]`
pré -carga	URLs adicionais usados para a meta de pré -carga. A pré -carga para URLs fornecida no atributo `file` de fontes `custom` e `web` são geradas automaticamente.	`[]`

Modo assíncrono versus render-bloqueio

Modo assíncrono

Carregue folhas de estilo de fonte e arquivos no modo de baixa prioridade. Se você deseja adicionar fontes de uma maneira performante, manipule o FOUT por conta própria e verifique se os tempos de renderização da página estão baixos, você deve usar o modo async .

Prós: Desempenho, o conteúdo é exibido antes que os arquivos de fonte sejam baixados e analisados
Contras: Fout precisa ser tratado

Modo de bloqueio de renderização

Carregue folhas de estilo de fonte e arquivos no modo de alta prioridade. Se você deseja usar esse plug-in como uma maneira simples de adicionar fontes ao seu projeto, como faria em qualquer outro projeto, sem nenhuma otimização de desempenho e manuseio de FOUT, você deve usar o modo render-blocking .

Prós: marcação simples, Fout não ocorrerá na maioria dos casos
Contras: folhas de estilo de fonte e arquivos de fonte podem atrasar o tempo de pintura de primeiro conteúdo

Manuseio FOUT com ouvinte de carregamento de fontes

Ao carregar fontes de maneira assíncrona, o Flash of não registrado (FOUT) pode acontecer porque as fontes carregam alguns momentos depois após a exibição do usuário.

Para evitar isso, podemos usar o CSS para estilizar a fonte de fallback para corresponder de perto o tamanho da fonte, a altura da linha e o espaçamento da letra da fonte principal que está sendo carregada.

Quando enableListener: true está definido na configuração do plug-in em gatsby-config.js , as classes html estão sendo adicionadas ao elemento <body> enquanto as fontes estão sendo carregadas.

O formato de nome da classe HTML estará no seguinte formato wf-[font-family-name] . Quando todas as fontes são carregadas, wf-all é aplicado.

Você pode usar o Matcher do estilo de fonte para ajustar a fonte de fallback perfeita e a configuração CSS de Fallback.

Aqui está o exemplo de como o elemento body ficará depois que todas as fontes estão sendo carregadas (dependendo da configuração).

 < body
  class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body >

V2 Breaking mudanças

Opções de interval e timeout removidas
Formato de nome de classe alterado para um wf-[font-family-name] para evitar misturar convenções de nomenclatura