Nós tomamos fontes da web para concedido estes dias. Nem sempre temos a opção de definir nosso texto em praticamente qualquer tipo de letra. Quer dizer, nós poderíamos, mas então teríamos que suspirar e dizer: “Bem, isso ficará bem em cerca de cinco computadores das pessoas. Espero que todos gostem de Verdana! ”
As fontes da Web trouxeram uma variedade muito necessária para a vista, alguns abusos de tipografia, algum peso extra de página à medida que as próprias fontes foram carregadas e flashes de texto não estilizado ou invisível. Bem… omelete, ovos, quebra, você tem a ideia. Isso estava prestes a acontecer.
Se os usuários ficarem olhando uma página em branco por muito tempo, eles podem simplesmente decidir sair
É um problema de usabilidade, porém, quando o texto é invisível até que a fonte personalizada seja carregada. Se os usuários ficarem parados olhando para uma página em branco por muito tempo (e muito tempo pode ser em milissegundos), eles podem simplesmente decidir sair. E isso é justo o suficiente. Não é fácil de usar.
Avance rapidamente alguns anos e estamos progredindo no controle da maneira como as fontes carregam. Até agora, fizemos isso com bibliotecas e APIs de terceiros. Mas agora, finalmente, essa funcionalidade está chegando ao CSS.
Digite a propriedade font-display . Atualmente, é apenas no Opera, no Opera para Android e no Chrome. (Ele foi introduzido pela primeira vez no Chrome 49 como um recurso experimental.)
Ele vem com quatro opções: auto , swap , fallback e opcional .
Basicamente, escolher font-display: auto irá deixar o navegador para agir como acontece agora. O texto ficará invisível até que a fonte personalizada seja carregada.
swap é provavelmente o que a maioria das pessoas vai usar. Se a fonte não for carregada, a próxima fonte disponível definida na propriedade font-family será usada. Quando a fonte da Web for carregada, ela será substituída. Isso é basicamente um flash de conteúdo não estilizado, mas isso é mais fácil de usar do que conteúdo invisível, eu acho.
fallback divide a diferença entre as duas primeiras opções. Por um atraso de 100 milissegundos, o texto ficará invisível. Se a fonte personalizada for carregada até então, ela será usada. Caso contrário, a próxima fonte na linha de sucessão será a regra até que a fonte personalizada seja carregada.
funciona opcionalmente como fallback, exceto que o navegador pode decidir não carregar a fonte customizada, se a conexão do usuário for muito lenta
O opcional funciona como fallback, exceto que o navegador pode decidir não carregar a fonte personalizada, se a conexão do usuário for muito lenta.
E aí temos que. declaration. Lembre-se, a fonte de exibição deve ser usada em uma declaração de fonte @ . Isso significa que não funcionará com provedores de fontes de terceiros como o Typekit ou o Google Fonts por enquanto. Uma vez que a exibição de fontes se torne mais difundida, no entanto, é provável que eles implementem algum tipo de opção para esse recurso.