javascript - otf - Precargar fuentes @ font-face?
font face sass (11)
¿Es posible precargar o almacenar en caché las fuentes @ font-face, muy probablemente con javascript, antes de que la página se cargue, por lo que no obtendrá ese feo salto cuando la página finalmente se cargue?
2017: ahora tienes developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
MDN: el valor de precarga del atributo rel del elemento le permite escribir solicitudes de búsqueda declarativas en su HTML, especificando los recursos que sus páginas necesitarán muy pronto después de la carga, por lo que desea comenzar a cargar anticipadamente en el ciclo de vida de una carga de página. se activa la maquinaria de renderizado principal del navegador. Esto garantiza que estén disponibles antes y que sea menos probable que bloqueen la primera representación de la página, lo que lleva a mejoras en el rendimiento.
<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
Verifique la compatibilidad del navegador .
Es más útil para la precarga de fuentes (no esperando que el navegador lo encuentre en algún CSS). También puede precargar algunos logotipos, iconos y scripts.
Aquí se discuten otras técnicas pro / contra (no mi blog).
A través del webfontloader de Google
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
}
}
});
Google tiene una buena biblioteca para esto: https://developers.google.com/webfonts/docs/webfont_loader Puede usar casi todas las fuentes y la lib agregará clases a la etiqueta html.
¡Incluso le da eventos de JavaScript cuando las fuentes de certrain están cargadas y activas!
¡No te olvides de servir tus archivos de fuentes gzip! ¡sin duda acelerará las cosas!
Hay algunas técnicas para "precargar" aquí: http://paulirish.com/2009/fighting-the-font-face-fout/
Principalmente engañando al navegador para que descargue el archivo lo más rápido posible.
También puede entregarlo como un uri de datos, lo que ayuda mucho. y también podría ocultar el contenido de la página y mostrarlo cuando esté listo.
Hice esto agregando una letra en mi documento principal y lo hice transparente y le asigné la fuente que quería cargar.
p.ej
<p>normal text from within page here and then followed by:
<span style="font-family:''Arial Rounded Bold''; color:transparent;">t</span>
</p>
La precarga correcta de la fuente es un gran agujero en la especificación de HTML5. He pasado por todas estas cosas y la solución más confiable que he encontrado es usar Font.js:
http://pomax.nihongoresources.com/pages/Font.js/
Puedes usarlo para cargar fuentes usando la misma API que usas para cargar imágenes
var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
console.log("font loaded");
}
Es mucho más simple y ligero que el descomunal cargador de Webfont de Google
Aquí está el repositorio de github para Font.js:
No conozco ninguna técnica actual para evitar el parpadeo a medida que se carga la fuente, sin embargo, puedes minimizarla enviando encabezados de caché adecuados para tu fuente y asegurándote de que esa solicitud se realice lo más rápido posible.
Recientemente estuve trabajando en un juego compatible con CocoonJS con DOM limitado al elemento canvas: este es mi enfoque:
El uso de fillText con una fuente que aún no se ha cargado se ejecutará correctamente pero sin retroalimentación visual, por lo que el plano del lienzo permanecerá intacto; todo lo que tiene que hacer es revisar periódicamente el lienzo para ver si hay algún cambio (por ejemplo, recorrer la búsqueda de getImageData). píxel no transparente) que sucederá cuando la fuente se cargue correctamente.
He explicado esta técnica un poco más en mi artículo reciente http://rezoner.net/preloading-font-face-using-canvas,686 canvas http://rezoner.net/preloading-font-face-using-canvas,686
Una técnica simple es poner esto en algún lugar de su í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>
Probado en Chrome 34, Safari 7 y FF 29 e IE 11
Use la API estándar de carga de fuentes de CSS .
Espere a que se carguen todas las fuentes y luego muestre su contenido:
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, ''FontFaces loaded.'');
document.getElementById(''waitScreen'').style.display = ''none'';
});
http://paulirish.com/2009/fighting-the-font-face-fout/ debería resolver tu problema.
Para responder a su pregunta inicial: sí, puede . Sin embargo, solo los navegadores Gecko y WebKit lo admiten actualmente.
Solo necesita agregar etiquetas de enlace en su cabeza:
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">