A font-displaypropriedade define como os arquivos de fonte são carregados e exibidos pelo navegador. É aplicado à @font-faceregra que define fontes personalizadas em uma folha de estilo.
@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )Valores
A font-displaypropriedade aceita cinco valores:
auto(padrão): Permite que o navegador use seu método padrão de carregamento, que geralmente é semelhante aoblockvalor.block: Instrui o navegador a ocultar brevemente o texto até que o download da fonte seja concluído. Mais precisamente, o navegador desenha o texto com um espaço reservado invisível e o troca pela face da fonte personalizada assim que carrega. Isso também é conhecido como “flash de texto invisível” ou FOIT.swap: Instrui o navegador a usar a fonte substituta para exibir o texto até que a fonte personalizada seja totalmente baixada. Isso também é conhecido como um “flash de texto sem estilo” ou FOUT.fallback: Atua como um compromisso entre os valoresautoeswap. O navegador irá ocultar o texto por cerca de 100 ms e, se a fonte ainda não tiver sido baixada, usará o texto substituto. Ele irá trocar para a nova fonte após o download, mas apenas durante um curto período de troca (provavelmente 3 segundos).optional: Comofallback, este valor diz ao navegador para ocultar inicialmente o texto e, em seguida, fazer a transição para uma fonte alternativa até que a fonte personalizada esteja disponível para uso. No entanto, esse valor também permite que o navegador determine se a fonte personalizada é mesmo usada, usando a velocidade de conexão do usuário como um fator determinante onde conexões mais lentas têm menos probabilidade de receber a fonte personalizada.
Esta é outra maneira de pensar sobre eles
| Período do Bloco | Período de troca | |
|---|---|---|
| quadra | Baixo | Infinito |
| trocar | Nenhum | Infinito |
| cair pra trás | Extremamente Curto | Baixo |
| opcional | Extremamente Curto | Nenhum |
Por que precisamos font-display
Antes de termos amplo suporte para @font-face, nosso arsenal tipográfico era limitado a fontes locais, onde as únicas fontes disponíveis eram aquelas que vinham pré-carregadas no computador do usuário final. Chamamos essas fontes de “seguras para a Web” porque o navegador não precisa fazer download de nada para que sejam renderizadas.
Então veio a @font-faceregra que deu aos designers da web e desenvolvedores de front-end novos poderes tipográficos nunca vistos antes. Isso nos permitiu fazer upload de arquivos de fonte para um servidor e escrever um conjunto de regras em nossas folhas de estilo que nomeiam a fonte e informam ao navegador onde baixar os arquivos. Também deu origem a serviços como o Google Fonts, que trouxe fontes personalizadas para as massas. Finalmente, um grande obstáculo que separava o design da web do design de impressão foi derrubado!
No entanto, as fontes personalizadas vieram (e continuam a vir) com um custo. Os arquivos de fonte podem ser grandes e o tempo extra para baixar os arquivos pode diminuir o desempenho de um site, principalmente para dispositivos em uma conexão de rede mais lenta. O custo extra para usuários em planos de dados limitados também se tornou um fator.
Uma outra preocupação particular que surgiu com as fontes personalizadas é o que foi apelidado de “flash de texto sem estilo” ou FOUT, para abreviar. O padrão dos navegadores é mostrar uma fonte do sistema enquanto aguardam o download da fonte personalizada. Isso permitiu que as páginas da web carregassem mais rápido, mas levantou preocupações entre os web designers que viam isso como um sequestro da experiência do usuário e deturpação do design pretendido. Os navegadores da Web hoje geralmente escondem o texto até que a fonte personalizada seja baixada, o que agora chamamos de “flash de texto invisível” ou FOIT.
Nem FOUT nem FOIT são ótimos. Temos maneiras de otimizar o desempenho de fontes personalizadas para ajudar a amenizar os efeitos. No entanto, agora temos que font-displaydizer ao navegador se preferimos FOUT, FOIT ou mesmo algo intermediário.
Teste de Suporte
Advertência interessante observada por Šime Vidas:
A exibição de fontes CSS é um
@font-facedescritor e não uma propriedade, portanto, seu suporte no navegador não pode ser testado com consultas de recursos (@supportsregra CSS e API de suporte CSS ).
Mais Informações
- Especificação do módulo de nível 1 dos controles de renderização de fontes CSS: um rascunho da especificação da propriedade.
font-displaypara as massas: Jeremy Wagner nos apresentou a propriedade aqui no CSS-Tricks.- Usando
@font-face: Uma explicação abrangente da regra e práticas recomendadas de como usá-la. - Pilha de fontes do sistema: um snippet para abandonar completamente as fontes personalizadas e confiar apenas nas fontes do sistema do usuário.
- Controlando o desempenho da fonte com
font-display: Um excelente artigo do Google sobre o assunto.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 60 | 58 | Não | 79 | 11,1 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11,3-11,4 |