web-dev-qa-db-pt.com

Pré-carregando as fontes @ font-face?

É possível pré-carregar ou, de outra forma, armazenar em cache fontes @ font-face, provavelmente com javascript, antes que a página seja carregada, para que você não tenha esse salto feio quando a página finalmente for carregada?

44
dougoftheabaci

Não conheço nenhuma técnica atual para evitar o flicker quando a fonte é carregada, mas você pode minimizá-la enviando os cabeçalhos de cache apropriados para a sua fonte e certificando-se de que essa solicitação passe o mais rápido possível.

1
Gabriel Hurley

Uma técnica simples é colocar isso em algum lugar no seu índice:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Testado no Chrome 34, Safari 7 e FF 29 e IE 11

28
Rafouille

Existem algumas técnicas para "pré-carregar" aqui: http://paulirish.com/2009/fighting-the-font-face-fout/

Principalmente enganando o navegador para baixar o arquivo o mais rápido possível.

Você também pode entregá-lo como um uri de dados, o que ajuda muito. E também você pode ocultar o conteúdo da página e mostrá-lo quando estiver pronto.

22
Paul Irish

2017: Agora você tem preload

MDN: O valor de pré-carregamento do atributo rel do elemento permite que você Grave solicitações de busca declarativa em seu HTML, especificando recursos Que suas páginas precisarão logo após o carregamento, que você portanto, deseja iniciar o pré-carregamento no início do ciclo de vida de uma carga da página , antes que o principal mecanismo de renderização do navegador seja acionado. Isso garante a sua disponibilização antecipada e é menos provável que bloqueia a primeira renderização da página, levando a melhorias de desempenho.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

Verifique compatibilidade do navegador .

É mais útil para o pré-carregamento de fontes (não esperando o navegador encontrá-lo em algum CSS). Você também pode pré-carregar alguns logotipos, ícones e scripts.

Outras técnicas pro/cons são discutidas aqui (não meu blog).

13
Christophe Roussy

O pré-carregamento correto de fontes é um grande buraco na especificação HTML5. Eu passei por todas essas coisas e a solução mais confiável que eu encontrei é usar o Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

Você pode usá-lo para carregar fontes usando a mesma API que você usa para carregar imagens

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

É muito mais simples e mais leve que o Webfont Loader do Google

Aqui está o repositório do github para o Font.js:

https://github.com/Pomax/Font.js

5
d13

Isto deve resolver o seu problema.

Para responder sua pergunta inicial: sim, você pode . Apenas os navegadores Gecko e WebKit suportam atualmente.
Você só precisa adicionar tags de link na sua cabeça:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
3
Knu

eu fiz isso adicionando uma carta no meu documento principal e a deixei transparente e atribuí a fonte que eu queria carregar.

por exemplo.

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
2
Trent

Via Google webfontloader

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});
1
Razan Paul

Use o padrão CSS Font Loading API .

Espere por (all) as fontes para carregar e, em seguida, mostre seu conteúdo:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Demo CodePen .

0
yPhil

O Google tem uma biblioteca do Nice para isso: https://developers.google.com/webfonts/docs/webfont_loader Você pode usar quase todas as fontes e a biblioteca adicionará classes à tag html. 

Ele ainda lhe dá eventos de javascript sobre quando as fontes certrain são carregadas e ativas!

Não se esqueça de servir o seu fontfiles gzipped! certamente acelerará as coisas!

0

Recentemente eu estava trabalhando em um jogo compatível com CocoonJS com DOM limitado ao elemento canvas - aqui está minha abordagem:

Usar fillText com uma fonte que ainda não tenha sido carregada será executada corretamente, mas sem feedback visual - assim o plano da tela permanecerá intacto - tudo que você precisa fazer é verificar periodicamente a tela em busca de alterações (por exemplo, looping por getImageData pixel não transparente) que acontecerá quando a fonte for carregada corretamente.

Eu expliquei esta técnica um pouco mais no meu artigo recente http://rezoner.net/preloading-font-face-using-canvas686

0
rezoner