Controlar o desempenho de fontes com o font-display

Rob Dodson

Decidir o comportamento de uma fonte da Web durante o carregamento pode ser uma e uma importante técnica de ajuste de desempenho. O novo descritor de exibição de fonte do A @font-face permite que os desenvolvedores decidam como as fontes da Web serão renderizadas (ou substitutas). dependendo do tempo que levam para carregar.

Diferenças na renderização de fontes atual

Fontes da Web dão aos desenvolvedores a capacidade de incorporar tipografia rica em nos projetos, mas, se o usuário ainda não tiver uma tipo de letra, o navegador precisa passar algum tempo fazendo o download. Como as redes podem instável, esse tempo de download pode afetar negativamente a do usuário. Afinal, ninguém vai se importar com a beleza do seu texto se ele demora muito para ser exibido.

Para reduzir parte do risco de um download de fonte lento, a maioria dos navegadores implementa uma tempo limite após o qual uma fonte substituta será usada. Essa é uma técnica útil, mas os navegadores diferem na implementação real.

• O Chrome e o Firefox têm um tempo limite de três segundos. Depois disso, o texto é exibido com a fonte substituta. Se a fonte conseguir fazer o download, é possível ocorre e o texto é renderizado novamente com a fonte pretendida.
• O Internet Explorer tem um tempo limite de zero segundo que resulta em texto imediato renderização. Se a fonte solicitada ainda não estiver disponível, um substituto será usado. o texto é renderizado novamente depois, quando a fonte solicitada fica disponível.
• O Safari não possui comportamento de tempo limite (ou pelo menos nada além de uma rede de linha de base tempo limite).

Para piorar as coisas, os desenvolvedores têm controle limitado na decisão de como de rede afetarão sua aplicação. Um desenvolvedor focado no desempenho pode preferir ter uma experiência inicial mais rápida com uma fonte substituta e aproveitar a fonte da web mais agradável em visitas subsequentes após a chance de download. Ao usar ferramentas como a Font Load API, é possível substituir alguns o comportamento padrão do navegador e obter ganhos de desempenho, mas, custo de escrever quantidades não triviais de JavaScript que, por sua vez, in-line na página ou solicitada de um arquivo externo, o que resulta Latência HTTP.

Para ajudar a solucionar essa situação, o Grupo de trabalho dos CSS propôs um novo Descritor @font-face, font-display, e uma propriedade correspondente para controlar como uma fonte disponível para download é renderizada antes de ser totalmente carregada.

Linhas do tempo de download de fontes

Semelhante aos comportamentos de tempo limite de fonte existentes que alguns navegadores implementam Atualmente, o font-display segmenta o ciclo de vida de um download de fonte em três principais períodos.

1. O primeiro é o período de bloqueio da fonte. Durante esse período, se tipo de fonte não é carregado, qualquer elemento que tentar usá-lo deverá renderizar com uma fonte substituta invisível. Se o tipo de fonte for carregado durante o período de bloqueio, o tipo de fonte é usado normalmente.
2. O período de troca da fonte ocorre imediatamente após o período de bloqueio da fonte. Durante nesse período, se o tipo de fonte não for carregado, qualquer elemento que tentar usá-lo precisa renderizar com um tipo de fonte substituta. Se o tipo de fonte carrega durante o período de troca, o tipo de fonte é usado normalmente.
3. O período de falha da fonte ocorre imediatamente após o período de troca de fonte. Se o tipo de fonte ainda não tiver sido carregado quando esse período começar, isso será marcado como um carregamento com falha, causando uma fonte normal de substituto. Caso contrário, a fonte é usado normalmente.

Ao compreender esses períodos, você pode usar o font-display para decidir como seus deve ser renderizada dependendo do download ou do download.

Qual exibição de fonte é ideal para você?

Para trabalhar com o descritor font-display, adicione-o ao seu @font-face em-rules:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

No momento, font-display é compatível com o seguinte intervalo de valores: auto | block | swap | fallback | optional.

automático

auto usa a estratégia de exibição de fonte utilizada pelo user agent. A maioria dos navegadores têm uma estratégia padrão semelhante a block.

bloquear

block dá ao tipo de fonte um curto período de bloqueio (três segundos é o recomendado na maioria dos casos). e um período de troca infinito. Em outras palavras, o navegador desenha "invisíveis" texto no início se a fonte não estiver carregada, mas troca o tipo da fonte assim que ela carrega. Para fazer isso, o navegador cria um tipo de fonte anônimo com métricas semelhante à fonte selecionada, mas com todos os glifos sem "tinta". Esse valor só deve ser usado se o texto estiver sendo renderizado em uma família tipográfica específica. para que a página seja utilizável.

trocar

swap dá ao tipo de fonte um período de bloqueio de zero segundo e um período de troca infinito. Isso significa que o navegador desenha o texto imediatamente com um substituto se a face da fonte não é carregado, mas troca o tipo de fonte assim que ele é carregado. Semelhante a block, este valor só deverá ser usado quando o processamento de texto em uma fonte específica for importante para a página, mas o processamento em qualquer fonte ainda obterá uma mensagem. O texto do logotipo é um bom candidato para troca, já que a exibição de um nome da empresa usando um substituto razoável transmitirá a mensagem, mas você eventualmente usar a família tipográfica oficial.

fallback

fallback fornece ao tipo de fonte um período de bloqueio extremamente pequeno (100 ms ou menos, recomendado na maioria dos casos) e um curto período de troca (três segundos é recomendado na maioria dos casos). Em outras palavras, o tipo de fonte é renderizado com um substituto em primeiro, se não foi carregada, mas a fonte é trocada assim que é carregada. No entanto, se passar muito tempo, o substituto será usado para o restante todo o ciclo de vida. fallback é um bom candidato para itens como corpo do texto, em que você que o usuário comece a ler o mais rápido possível e não queira perturbar a experiência ao deslocar o texto enquanto uma nova fonte é carregada.

opcional

opcional dá ao tipo de fonte um período de bloqueio extremamente pequeno (100 ms ou menos é recomendado na maioria dos casos) e um período de troca de zero segundo. Semelhante ao substituto, essa é uma boa opção para quando o download da fonte é algo mais agradável mas não essenciais para a experiência. O valor optional deixa os navegador para decidir se inicia o download da fonte, o que pode optar por não ou pode fazê-lo com baixa prioridade, dependendo do que ele acha que seria melhor para o usuário. Isso pode ser útil em situações em que o usuário está em um conexão fraca e puxar uma fonte pode não ser o melhor uso dos recursos.

Suporte ao navegador

No momento, font-display está atrás da flag "Experimental Web Platform Features" no Chrome 49 para computadores e está disponível no Opera e no Opera para Android.

Demonstração

Confira a amostra para dar font-display uma tacada. Para desenvolvedores focados no desempenho, pode ser mais um ferramenta útil em sua barra de ferramentas!