font-display: o que swap, block, fallback e optional fazem de verdade

O que o font-display controla

Uma fonte web demora a chegar, e o navegador precisa desenhar o texto antes disso. font-display é o descritor que vai dentro de uma regra @font-face para dizer o que acontece enquanto isso: segurar o texto até a fonte ficar pronta, mostrá-lo já com uma fonte de reserva e trocar depois, ou desistir da fonte se ela demorar demais. Os cinco valores são auto, block, swap, fallback e optional, e o inicial é auto.

Por baixo, a especificação descreve um cronômetro de download que passa por três períodos. Durante o período de bloqueio, um elemento que usa a fonte deve ser desenhado com uma face de reserva invisível. Durante o período de troca, ele é desenhado com uma de reserva comum. E quando começa o período de falha, um download inacabado é marcado como falho e vale o mecanismo de reserva normal para sempre. Cada valor de font-display é apenas uma escolha de quanto duram os dois primeiros períodos.

A parte invisível é mais interessante do que sua fama sugere. A especificação não diz que o texto some — diz que o navegador cria uma face anônima com as mesmas métricas da real, mas com todos os glifos invisíveis. O espaço já está reservado no tamanho certo, então, quando a fonte chega, nada se reposiciona. O piscar de texto invisível é um piscar de espaço em branco exatamente com o formato certo.

Como usar

1. Escolha um valor e um tempo de download. O tempo é em milissegundos a partir do instante em que o navegador inicia o cronômetro. Os botões de exemplo cobrem uma fonte que baixa e é descartada, uma que mostra os três estados em sequência, uma que segura o texto e uma que nunca chega a ser trocada.
2. Leia a linha do tempo. Cada linha é um trecho de tempo e o que o leitor vê nele: espaço em branco, uma fonte de reserva ou a sua. A linha de resultado logo abaixo diz sem rodeios se a fonte chega a aparecer.
3. Mude os períodos. Os três campos de duração são editáveis de propósito, porque a especificação recomenda esses números em vez de exigi-los. Ponha o período de bloqueio em zero — o próprio exemplo da especificação do que um navegador pode permitir ao leitor — e veja a fase invisível sumir.

Todo número da tabela de sempre é uma recomendação

Procure por font-display e você acha a mesma tabela em todo lugar, com 3s e 100ms como se fossem fixos. Não são, e a especificação é notavelmente cuidadosa ao dizer isso. block dá um período de bloqueio curto, com 3s recomendado na maioria dos casos. swap dá um período de bloqueio mínimo, com 100ms ou menos recomendado na maioria dos casos. fallback combina os dois. Esses são os dois únicos números do descritor inteiro, e ambos vêm com a mesma ressalva.

Há ainda uma nota que cobre os cinco valores de uma vez: navegadores podem usar durações um pouco diferentes, ou comportamentos mais sofisticados que a sintaxe nem consegue expressar. E vai além, dizendo que um navegador pode deixar o leitor anular o que o autor escolheu — com o exemplo de forçar todas as fontes a ter um período de bloqueio de zero segundo. Ou seja, os números são orientativos em dobro: o navegador não precisa segui-los, e o leitor pode passar por cima.

É por isso que aqui eles podem ser editados em vez de aparecer como constantes. Pôr o bloqueio em zero elimina a fase invisível inteira e o texto aparece de imediato com uma reserva; alongar o período de troca resgata uma fonte que o número recomendado teria jogado fora. Nenhuma das duas coisas é hipótese: são comportamentos que a especificação permite explicitamente.

auto é o extremo honesto disso tudo. Sua definição inteira é que a política de exibição fica a cargo do navegador. A especificação só acrescenta que muitos navegadores se comportam de forma parecida com block, o que é uma observação sobre o mundo e não uma regra. Se você escreve auto, ou não escreve nada, não escolheu comportamento nenhum.

optional não tem períodos

Toda tabela copiada dá a optional um período de bloqueio e um de troca. A especificação não dá nenhum. Ela define o valor pelo resultado: se a fonte puder ser carregada imediatamente, ou seja, se estiver disponível para a primeira pintura do texto, a fonte é usada; caso contrário, ela é tratada como se ambos os períodos já tivessem expirado.

O que vem depois são duas regras duras em vez de durações. Uma fonte optional nunca deve fazer o layout da página pular enquanto carrega e, uma vez que o texto tenha sido pintado com uma reserva, ela não deve ser desenhada com a fonte optional pelo resto da vida da página. Nem mais tarde na sessão, nem na próxima pintura: a fonte está fora. Por isso o cenário optional desta página mostra uma única linha que não muda — sem mudança de fase não há pulo, que é justamente o sentido do valor.

O navegador também tem aqui uma folga incomum. Ele pode abortar o download assim que decide que não usará a fonte, pode baixá-la com prioridade muito baixa e, se achar que assim serve melhor o leitor, pode nem começar o download e ir direto para a reserva. Na prática isso costuma significar que uma fonte declarada optional é baixada na primeira visita, ignorada, e usada do cache na segunda.

A leitura prática é que optional não é uma reserva mais rígida. É outra promessa: esta fonte é um bônus, nunca atrase nem incomode o leitor por causa dela. Escolhê-la é aceitar que alguns visitantes simplesmente não verão a sua tipografia.

O que isto não vai dizer

Ele simula as regras, não mede o seu site. O tempo de download é o número que você digitou, não um observado numa rede real, e nada aqui busca uma fonte. Para saber quanto a sua demora de fato, use o painel de rede do navegador — e lembre que o cronômetro começa quando o navegador tenta usar a face pela primeira vez, o que não é quando a folha de estilos carrega.

Como as durações são recomendações, a linha do tempo é o que um navegador que as seguisse faria, e não necessariamente o que o seu fará. Um navegador com outros números, com uma política mais sofisticada que a sintaxe não expressa, ou que respeite uma anulação do leitor, vai se comportar de outro jeito e continuar em conformidade. Isso é um fato do descritor mais que uma limitação desta página, e é por isso que as durações são editáveis.

Duas coisas ficam fora do modelo. A especificação permite ao navegador atrasar um pouco o desenho de um elemento que usa uma fonte optional, para dar tempo a um cache local possivelmente lento, e não diz de quanto — então a janela usada aqui para imediatamente é um substituto, não um número citado. E o carregamento de fontes se cruza com o preload, com a API de carregamento de fontes do CSS e com a prioridade que o navegador dá à requisição, nada disso simulado.

Por fim, isto trata de uma face só. Uma página com várias faces de uma mesma família roda vários desses cronômetros ao mesmo tempo, e o que o leitor vê é a combinação — inclusive o caso em que a reserva é trocada para um peso e não para outro.

Por que é grátis?

Montar uma linha do tempo a partir de alguns números roda no seu navegador. Não há servidor no caminho, então não há o que cobrar nem conta a criar.

Nada é enviado e nenhuma fonte é baixada. Recarregue a página e ela terá esquecido o que você digitou.