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):
- carregando (.wf-loading): as fontes da Web estão sendo carregadas
- ativa (.wf-active): as fontes da Web estão ativas
- 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:
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:
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 forem carregadas, essa classe é alterada para .wf-active. Então, você pode adicionar o seguinte às folhas de estilo:
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:
A 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:
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:
- .wf-loading: é adicionada enquanto as fontes são carregadas;
- .wf-active: é adicionada quando pelo menos uma fonte já tiver sido carregada;
- .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:
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.
Mais itens semelhantes
Explorar o Adobe Fonts
Encontre a fonte perfeita para qualquer projeto da Web ou impresso.
