Eventos de fonte

Os eventos de fonte estão incluídos com o carregamento de fontes JavaScript, que é usado para subdivisão dinâmica. Os eventos de fonte permitem que você personalize sua página da Web com base na informação de que as fontes estão ativas, ainda estão carregando ou estão indisponíveis por algum motivo.

Os eventos de fonte ainda não estão disponíveis para o carregamento de fontes CSS. Se você estiver usando o código incorporado CSS padrão ou @import em seu site, poderá incluir outra biblioteca JavaScript para personalizar o carregamento de fontes.

Uso de eventos de fonte no CSS

Para ajudar você a controlar melhor como sua página é exibida enquanto as fontes são carregadas ou estão inativas, o código incorporado JavaScript fornece um conjunto de eventos de fonte que são ativados conforme as fontes são carregadas na página.

Existem três eventos de fonte principais, cada um com um nome de classe correspondente (entre parênteses):

  1. carregando (.wf-loading): as fontes da Web estão sendo carregadas
  2. ativa (.wf-active): as fontes da Web estão ativas
  3. inativa (.wf-inactive): as fontes da Web estão inativas

As classes CSS associadas a esses eventos são anexadas ao elemento HTML durante o carregamento. Elas podem ser usadas em suas folhas de estilo para controlar como a página é estilizada conforme as fontes são carregadas. Por exemplo:

.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 */
}

As classes de eventos de fonte normalmente são usadas para controlar o flash de texto sem estilo (FOUT) e para definir fontes e estilos substitutos em navegadores não compatíveis com fontes da Web ou nos quais elas estão desativadas. É sempre uma boa ideia incluir fontes e estilos substitutos, já que algumas combinações de navegador, sistema operacional e preferências do usuário podem fazer com que as fontes fiquem inativas em sua página.

Eventos de fonte do JavaScript

Esses eventos de fonte também estão disponíveis como ganchos de retorno de chamada do JavaScript por meio do método Typekit.load. Você pode transmitir um objeto que contém funções de retorno de chamada ao chamar o Typekit.load. Assim, essas funções de retorno de chamada serão ativadas à medida que diferentes eventos de fonte ocorrerem durante o carregamento. Por exemplo:

<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>

Os retornos de chamada do JavaScript podem ser usados para adicionar elementos como fade in quando as fontes são carregadas ou para fazer um complexo redimensionamento matemático de layouts de apresentação com base nas dimensões do texto renderizado.

Além desses eventos de fonte básicos, também são fornecidos eventos de fonte mais detalhados para variações de fonte específicas. Os nomes das classes desses eventos são uma combinação do nome da família da fonte, da descrição da variação da fonte e de um nome de evento de fonte. Assim, por exemplo, adicionar a espessura normal de 400 da fonte Gesta a um projeto resultaria em classes de eventos de fonte como wf-gesta-n4-loading e wf-gesta-n4-active. No JavaScript, os retornos de chamada fontloading, fontactive e fontinactive estão disponíveis e podem receber a família de fontes e a descrição da fonte para cada variação específica.

Uso de eventos de fonte: gerenciar o flash de texto sem estilo (FOUT)

Cada navegador lida com o carregamento de fontes da Web à sua maneira. Se inicialmente um navegador exibir o texto com uma fonte substituta e alternar para as fontes vinculadas após a conclusão do carregamento, você poderá obter um flash de texto sem estilo ou FOUT.

Quando as fontes estão sendo carregadas, uma classe de .wf-loading é aplicada ao elemento HTML. Depois que as fontes são carregadas, essa classe muda para .wf-active. Portanto, você pode adicionar o seguinte às suas folhas de estilo:

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

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

Em seguida, você pode ajustar os estilos para tornar o FOUT menos dissonante. Por exemplo, observando se a fonte do flash e a fonte da Web carregada parecem ter o mesmo tamanho. Ou você pode ocultar o texto até que a fonte esteja completamente carregada. Por exemplo:

<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>

seção “definir fontes substitutas” apresenta mais exemplos de configuração de estilos CSS com eventos de fonte.

Uso de eventos de fonte: definir fontes substitutas

As fontes são carregadas como ativos em uma página da Web, do mesmo modo que imagens ou vídeo. Dependendo da combinação de sistema operacional, navegador da Web, extensões instaladas, preferências do usuário e velocidade de conexão, as fontes da Web às vezes podem não ser carregadas. Nesses casos, serão usadas as fontes substitutas na pilha CSS.

Por exemplo, você pode ajustar o tamanho das fontes substitutas ao usar uma fonte da Web condensada, para que o layout permaneça consistente mesmo quando as fontes da Web não forem carregadas. Saiba como:

.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 fonte: simular o flash de texto invisível (FOIT) em projetos dinâmicos

Por padrão, os projetos dinâmicos renderizam texto estilizado com a fonte da Web após o flash de texto sem estilo (FOUT). Isso significa que o navegador renderizará as fontes substitutas enquanto as fontes da Web estiverem sendo carregadas e alternará para as fontes da Web assim que elas estiverem disponíveis para uso. Esse processo é diferente da abordagem alternativa de renderização de fontes da Web, em que um navegador oculta o texto durante o download das fontes da Web e mostra o texto, estilizado com a fonte da Web, assim que as fontes da Web são carregadas. Isso é chamado de flash de texto invisível (FOIT).

A abordagem FOUT torna as páginas utilizáveis mais rapidamente, em especial em conexões de rede mais lentas. No entanto, se você preferir a abordagem FOIT, pode simulá-la em todos os navegadores usando eventos de fonte. Os eventos de fonte consistem em três classes adicionadas ao elemento:

  1. .wf-loading: é adicionada enquanto as fontes são carregadas;
  2. .wf-active: é adicionada quando pelo menos uma fonte já tiver sido carregada;
  3. .wf-inactive: é adicionada quando nenhuma das fontes é carregada.

Você pode usar essas três classes em seu CSS para simular o carregamento FOIT, ocultando o texto quando a classe wf-loading está ativa e mostrando o texto quando a classe wf-active ou wf-inactive está ativa:

.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 exemplo, se os elementos h1 e p estiverem usando uma fonte da Web, use este CSS para ocultá-los enquanto as fontes estiverem sendo carregadas.

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

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

Fazer logon em sua conta