O pré-carregamento @ fonts font-face?

Question

É possível pré-carga ou de outra forma de cache @ fonts font-face, provavelmente com javascript, antes do carregamento de páginas para que você não obter esse salto feio quando a página finalmente faz carga?

Answer 1

Eu não estou ciente de qualquer técnica atual para evitar a cintilação como as cargas da fonte, no entanto, você pode minimizá-lo através do envio de cabeçalhos de cache adequado para o seu tipo de letra e certificando-se que este pedido passa por tão rapidamente quanto possível.

Answer 2

Uma técnica simples é colocar isso em algum lugar em 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 em Chrome 34, Safari 7 e 29 FF e IE 11

Answer 3

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

Na maior parte enganando o navegador para fazer o download do arquivo mais rápido possível ..

Você também pode entregá-lo como um URI de dados, o que ajuda muito. e também você poderia esconder o conteúdo da página e mostrá-la quando o seu pronto.

Answer 4

2017: agora você tem pré-carga

MDN: O valor de pré-carga de atributo rel do elemento permite que você write declarativa solicitações de busca em seu HTML, especificando recursos que suas páginas vai precisar muito em breve após o carregamento, o que você portanto, quer começar a pré-carga no início do ciclo de vida de uma página carregar, antes do navegador principais máquinas de processamento entra em ação. Este garante que eles são disponibilizados mais cedo e são menos propensos a bloquear a página do primeiro render, levando a melhorias de desempenho.

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

Verifique compatibilidade do navegador .

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

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

Answer 5

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

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

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

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

É muito mais simples e mais leve do que desmedido do Google Webfont carregador

Aqui está a repo github para Font.js:

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

Answer 6

Este deve resolver o seu problema.

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

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

Answer 7

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
        }
    }
});

Answer 8

eu fiz isso adicionando alguns carta no meu documento principal e tornou transparente e atribuído 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>

Answer 9

Use o padrão CSS Font Carregando API .

Aguarde ( todas ) as fontes para carregar, e então mostrar seu conteúdo:

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

Demonstração CodePen .

Answer 10

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

Usando fillText com uma fonte que ainda não foi carregado irá executar corretamente, mas sem feedback visual - para que o avião tela irá permanecer intacta - tudo que você tem a fazer é verificar periodicamente a tela para quaisquer alterações (por exemplo loop através getImageData à procura de qualquer pixel não transparente) que vai acontecer quando as cargas da fonte corretamente.

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

Answer 11

O Google tem uma biblioteca agradável para isto: https://developers.google.com/webfonts/ docs / webfont_loader Você pode usar quase qualquer fontes ea lib irá adicionar classes para a tag html.

Ela ainda lhe dá JavaScript eventos quando fontes certrain são carregados e! Ativa

Não se esqueça de servir os seus fontfiles gzipped! ele certamente vai acelerar as coisas!

Answer 12

Como eu encontrei a melhor maneira está fazendo é pré-carregamento de uma folha de estilo que contém o tipo de letra, e em seguida, deixar navegador para carregá-lo automaticamente. Eu usei o font-face em outros locais (na página HTML), mas depois pude observar a fonte mudando efeito brevemente.

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

, em seguida, no arquivo font.css, especifique as seguintes.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

Você não pode atribuir um nome a fontes quando é pré-carregado através da tag link (me corrija se eu estava errado Eu não poderia encontrar uma maneira ainda), e, assim, você tem que usar font-face para atribuir o nome ao Fonte. Mesmo que seja possível carregar uma fonte através da tag link, não é recomendável que você não pode atribuir um nome ao tipo de letra com ele. Sem um nome como com font-face, você não será capaz de usá-lo em qualquer lugar da página web. De acordo com gtmetrix, cargas de folha de estilo no início, em seguida, descansar do scripts / estilo por fim, então a fonte antes de dom é carregado, e, portanto, você não vê fonte efeito mudando.

Answer 13

Sua cabeça deve incluir o rel pré-carga da seguinte forma:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

Desta forma woff2 será pré-carregado por navegadores que suporte a pré-carga, e todos os formatos de fallback será carregado como fazem normalmente.
E sua face de fonte css deve ser semelhante a este

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}