Precaricare i caratteri @font-face?

Question

È possibile precaricare o altrimenti memorizzare nella cache i caratteri @font-face, molto probabilmente con Javascript, prima che la pagina venga caricata in modo da non ottenere quel brutto salto quando la pagina finalmente viene caricata?

Answer 1

Io non sono a conoscenza di qualsiasi tecnica di corrente per evitare il tremolio, come i carichi di carattere, ma è possibile ridurre al minimo inviando intestazioni di cache corretti per il tipo di carattere e fare in modo che tale richiesta passa attraverso il più rapidamente possibile.

Answer 2

Una tecnica semplice è quello di mettere da qualche parte nel vostro indice:

<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>

Testato su Chrome 34, Safari 7 e 29 FF e IE 11

Answer 3

Ci sono alcune tecniche per il "precaricamento" qui:http://paulirish.com/2009/fighting-the-font-face-fout/

Principalmente inducendo il browser a scaricare il file il più velocemente possibile.

Puoi anche consegnarlo come data-uri, il che aiuta molto.e potresti anche nascondere il contenuto della pagina e mostrarlo quando è pronto.

Answer 4

2017: Ora hai precarico

  

MDN: il valore di precarico della attributo rel dell'elemento permette di   scrivere dichiarativa prendere richieste nel codice HTML, specificando   le risorse che le pagine avranno bisogno molto presto dopo il caricamento, che si   vuole quindi iniziare il precaricamento nelle prime fasi del ciclo di vita di una pagina   carico, prima di principali calci macchine il rendering del suo navigatore web in. Questo   assicura che essi siano resi disponibili in precedenza e hanno meno probabilità di   bloccare la pagina prima di rendering, che porta a miglioramenti delle prestazioni.

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

compatibilità del browser .

E 'più utile per carattere precarico (non in attesa per il browser di trovare in qualche CSS). È inoltre possibile precaricare alcuni loghi, icone e gli script.

Altre tecniche di pro / contro sono discussi qui (non il mio blog).

Answer 5

caratteri corretto precarico è un grande foro nella specifica HTML5. Ho passato attraverso tutte queste cose e la soluzione più affidabile che ho trovato è quello di utilizzare Font.js:

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

Si può usare per caricare i font utilizzando la stessa API si utilizza per caricare le immagini

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

E 'molto più semplice e più leggero di di Google massiccia WebFont Loader

Ecco il repo github per Font.js:

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

Answer 6

Questo dovrebbe risolvere il problema.

Per rispondere alla tua domanda iniziale: sì è possibile . Solo Gecko e WebKit browser supportano attualmente però.
Hai solo bisogno di aggiungere tag link nella tua testa:

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

Answer 7

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

ho fatto questo con l'aggiunta di qualche lettera nel mio documento principale e ne ha fatto trasparente e contrassegnati con il carattere che ho voluto caricare.

per es.

<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

Utilizza lo standard Font CSS Caricamento API .

Attendere ( tutti ) i caratteri da caricare, e poi mostrare sul suo sito web:

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

Demo CodePen .

Answer 10

Recentemente stavo lavorando su un gioco compatibile con CocoonJS con DOM limitata all'elemento canvas - qui è il mio approccio:

Uso fillText con un carattere che non è stato ancora caricato eseguirà correttamente ma senza feedback visivo - in modo che il piano di tela rimarrà intatto - tutto quello che dovete fare è controllare periodicamente la tela di eventuali modifiche (ad esempio scorrendo getImageData alla ricerca di ogni pixel non trasparente), che accadrà quando i carichi di carattere correttamente.

ho spiegato questa tecnica un po 'di più nel mio recente articolo http: / /rezoner.net/preloading-font-face-using-canvas,686

Answer 11

Google ha una bella libreria per questo: https://developers.google.com/webfonts/ docs / webfont_loader È possibile utilizzare quasi tutti i font ei lib sarà aggiungere classi al tag html.

E 'anche ti dà javascript eventi quando i font certrain vengono caricati e attiva!

Non dimenticare di servire i vostri fontfiles compressi con gzip! sarà certamente accelerare le cose!

Answer 12

Come ho trovato il modo migliore sta facendo è il precaricamento un foglio di stile che contiene il tipo di carattere, e poi lasciare che il browser di caricare automaticamente. Ho usato il font-face in altre posizioni (nella pagina html), ma poi ho potuto osservare l'effetto di caratteri cambia brevemente.

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

poi nel file font.css, specificare come segue.

@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 */
}

Non è possibile assegnare un nome ai font quando è precaricato tramite tag link (correggetemi se mi sono sbagliato non riuscivo a trovare un modo ancora), e quindi è necessario utilizzare font-face per assegnare il nome al font. Anche se è possibile caricare un tipo di carattere con tag link, non è consigliabile in quanto non è possibile assegnare un nome al font con esso. Senza un nome come con font-face, non sarà in grado di utilizzare in qualsiasi punto della pagina web. Secondo gtmetrix, carichi del foglio di stile, all'inizio, poi resto del scripts / stile per ordine, quindi il tipo di carattere, prima dom viene caricato, e quindi non si vede carattere effetto cambia.

Answer 13

La testa deve includere i rel precarico come segue:

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

Questa woff2 modo sarà precaricato da browser che supportano precarico, e tutti i formati di fallback caricherà come avviene normalmente.
E il tuo css font face dovrebbe essere simile a questo

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