A partir do Chrome 83, os links rel="preload" e font-display: opcionais podem ser combinados para remover completamente a instabilidade do layout.
Ao otimizar os ciclos de renderização, o Chrome 83 elimina a mudança de layout ao pré-carregar fontes opcionais.
Combinar <link rel="preload"> com font-display: optional é a maneira mais eficaz de
garantir que não haja instabilidade de layout ao renderizar fontes personalizadas.
Compatibilidade com navegadores
Confira os dados da MDN para obter informações atualizadas sobre o suporte entre navegadores:
Renderização da fonte
A mudança de layout, ou reformulação, ocorre quando um recurso de uma página da Web muda dinamicamente, resultando em uma "mudança" de conteúdo. A busca e a renderização de fontes da Web podem causar mudanças de layout diretamente de duas maneiras:
- Uma fonte substituta é trocada por uma nova fonte ("flash de texto sem estilo")
- O texto "invisível" é exibido até que uma nova fonte seja renderizada na página ("flash de texto invisível")
A propriedade CSS font-display oferece uma maneira de modificar
o comportamento de renderização de fontes personalizadas usando vários valores compatíveis diferentes (auto, block,
swap, fallback e optional). A escolha do valor a ser usado depende do comportamento preferido
para fontes carregadas de forma assíncrona. No entanto, cada um desses valores com suporte pode acionar o novo layout
de uma das duas maneiras listadas acima, até agora.
Fontes opcionais
A propriedade font-display usa uma linha do tempo de três pontos para processar fontes que precisam ser
transferidas por download antes de serem renderizadas:
- Bloquear:renderiza texto "invisível", mas mude para a fonte da Web assim que o carregamento é concluído.
- Swap:renderiza texto usando uma fonte substituta do sistema, mas muda para a fonte da Web assim que ela termina de carregar.
- Com falha:renderiza texto usando uma fonte substituta do sistema.
Anteriormente, as fontes designadas com font-display: optional tinham um período de bloqueio de 100 ms e nenhum período
de troca. Isso significa que o texto "invisível" é mostrado muito brevemente antes de alternar para uma fonte
substituta. Se o download da fonte não for feito em até 100 ms, a fonte substituta será usada e não haverá
troca.
font-display: optional no Chrome quando o download da fonte é feito após o período de bloco de 100 msNo entanto, caso o download da fonte seja feito antes do término do período de bloqueio de 100 ms, a fonte personalizada será renderizada e usada na página.
font-display: optional no Chrome quando o download da fonte é feito antes do período de bloco de 100 msO Chrome renderiza novamente a página duas vezes em ambas as instâncias, independentemente de a fonte substituta ser usada ou se a fonte personalizada termina de carregar a tempo. Isso causa uma leve oscilação de texto invisível e, nos casos em que uma nova fonte é renderizada, uma instabilidade do layout que move parte do conteúdo da página. Isso vai acontecer mesmo que a fonte seja armazenada no cache de disco do navegador e possa ser carregada bem antes do término do período de bloqueio.
As otimizações chegaram ao Chrome 83 para remover completamente o primeiro ciclo de renderização de fontes opcionais
pré-carregadas com <link rel="preload'>.
Em vez disso, a renderização é bloqueada até que a fonte personalizada termine de carregar ou que um determinado período
tenha passado. Esse tempo limite está definido como 100 ms, mas pode mudar em breve
para otimizar o desempenho.
font-display: optional no Chrome quando as fontes são pré-carregadas e o download da fonte é feito após o período de bloco de 100 ms (sem flash de texto invisível)
font-display: optional no Chrome quando as fontes são pré-carregadas e a fonte é baixada antes do período de blocos de 100 ms (sem flash de texto invisível)O pré-carregamento de fontes opcionais no Chrome elimina a possibilidade de instabilidade do layout e flash de texto sem estilo. Isso corresponde ao comportamento necessário, conforme especificado no nível 4 do módulo de fontes CSS, em que fontes opcionais nunca devem causar novo layout, e os user agents podem atrasar a renderização por um período adequado.
Embora não seja necessário pré-carregar uma fonte opcional, isso aumenta muito a chance de carregar antes do primeiro ciclo de renderização, especialmente se ela ainda não estiver armazenada no cache do navegador.
Conclusão
A equipe do Chrome está interessada em saber sobre suas experiências com o pré-carregamento de fontes opcionais com essas novas otimizações. Registre um problema se você tiver algum problema ou quiser descartar sugestões de recursos.