web font loading recipes
1.0.0
Um monte de demos para diferentes estratégias de carregamento de fontes da web. Alguns deles estão incluídos em um guia abrangente para estratégias de carregamento de fontes, outras são mais experimentais .
As demos estão hospedadas em https://www.zachleat.com/web-fonts/demos/
Como as fontes da Web são um aprimoramento progressivo e com o aumento do suporte para a API de carregamento de fontes CSS, podemos esperar um tempo em que não precisaremos embalar um poli -preenchimento no cabeçalho (para um carregamento de fonte ainda mais rápido). As receitas simplificadas da API de carregamento de fontes CSS são os padrões, mas as versões policiletadas são incluídas para o suporte mais amplo do navegador - não apenas apenas as versões policiletadas mostrarão fontes na Web nos navegadores da Web Explorer e Edge (que não têm suporte para o API de carregamento de fontes CSS).
font-display: swap@font-face descritorpreload<link>font-display: swap com preload<link> tag e css : @font-face descritorfont-display e preloadSemelhante ao exposto, mas sem usar uma classe - usando apenas a API de carregamento de fonte CSS. Isso não requer nenhuma modificação do CSS, injeta as fontes da Web usando o JS programaticamente. Vi esse método pela primeira vez no Manual Webfont da @bramstein.
.style.fontFamily Método (só funciona bem com uma família por página), viu isso primeiro em um tweet de @simevidasCarga de dois estágios, usando um arquivo de fonte romana no primeiro estágio (com síntese de fontes).
preload<link> tag e javascript : API de carregamento de fontes CSSfont-display: optional com JavaScript.preload , com um fallback polyfill emulando font-display: optional<link> tag e javascript : CSS Fonte Carregando API e FontfaceObserver PolyfilEssas não são necessariamente estratégias de carregamento de fontes por conta própria, mas são aprimoramentos extras que você pode colocar em cima e combinar com estratégias existentes.
Opte as fontes da Web em velocidades lentas de conexão.
prefers-reduced-motion Opte de fontes da web quando o usuário tiver ativado a preferência de acessibilidade Reduce Motion .
save-data Opte de fontes da web quando o usuário tiver ativado o modo de Data Saver .
Você provavelmente verá postagens no blog sobre elas em algum momento.
font-display: optionalVamos. ?
Navegadores antigos costumavam renderizar sem tempo limite, o que, na prática, tornou as fontes da web um único ponto de falha. O uso do WOFF2 corta apenas a mostarda para os navegadores modernos que têm um tempo de tempo de três segundos para fontes da web. Somos texto anti-invisíveis aqui, mas vale a pena mencionar essa abordagem.
font-synthesis não é um bom produto final.
<style> Qualquer coisa que use JavaScript para injetar um novo <style> com os blocos @font-face dentro. Custo de repintura muito ruim - evite isso. Isso é usado no método de URI de dados assíncronos acima, mas também é comum em métodos de pior desempenho.
font-display: optional e preloadpreload com font-display: optional é um anti-padronizaçãofont-display (misturando valores de font-display em uma font-family )Atualmente, este método não possui suporte cruzado. Espero que isso mude - aproveite mais.
swap / 3 optional ) Isso é uma coisa comum que as pessoas tentam - elas assíncronas carregam o CSS (e apenas o CSS). Caramba, usei esse comportamento antes de começar a estudar o carregamento da fonte da web.
@supports e font-displayfont-displayfont-display (e funcionar bem sem dependências JS)@supports não funciona com descritores de face de fontes.font-family Coloque duas ou mais fontes da Web font-family em uma única pilha font-family .
Falha : o algoritmo de correspondência de fontes seleciona a primeira fonte da Web que corresponde e tenta carregá -la (ignorando as famílias de fontes da web subsequentes). Mesmo se você preload o primeiro estágio do subconjunto, ele trocará devido à prioridade da ordem font-family .
Código
Demonstração
ATUALIZAÇÃO : Embora você possa mitigar o problema acima com font-display , talvez modificando a ordem da pilha font-family e do pedido de bloco @font-face , ainda há problemas em remover a fonte desnecessária da web de subconjunto da página após a versão maior carregada. Os recursos da fonte que ocorrem com glifos que cruzam esses limites do arquivo de fontes serão quebrados (Kerning, ligantes, etc.). Da mesma forma, você não pode remover um objeto FontFace emparelhado com CSS usando a API de carregamento de fonte CSS (de acordo com a especificação).
** Observe que esses métodos se envolverão no Internet Explorer e Edge, aproveitando seu comportamento padrão de carregamento de fontes.
