¿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?Precargando fuentes @ font-face?
No conozco ninguna técnica actual para evitar el parpadeo a medida que se carga la fuente, sin embargo puede minimizarla enviando encabezados de caché adecuados para su fuente y asegurándose de que la solicitud se realice lo más rápido posible.
This debería resolver su problema.
Para responder a su pregunta inicial: sí, puede. Sin embargo, solo los navegadores Gecko y WebKit lo admiten actualmente.
sólo tiene que añadir etiquetas de enlace en su cabeza:
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
Esto no funciona con fuentes de lienzo – d13
Debe tener cuidado con la preproducción de material en su página. No es lo mismo que la captación previa. – kleinfreund
¿por qué 'prerender' y no' preload'? es una fuente, no un archivo HTML, no hay nada que mostrar al respecto – vsync
Hay algunas técnicas para "precarga" aquí: http://paulirish.com/2009/fighting-the-font-face-fout/
Parcialmente engañar al navegador para que descargue el archivo lo más rápido posible.
También puede entregarlo como un data-uri, que ayuda mucho. y también podría ocultar el contenido de la página y mostrarlo cuando esté listo.
Lo siento, para desenterrar esto, pero sospecho que no estoy entendiendo algo. Los consejos en la publicación del blog parecen tratarse de ocultar texto mientras se carga la fuente, pero ¿qué ocurre si solo quiero obtener, p. Chrome para cargarlo lo antes posible y no cuando encuentra texto con esa fuente? ¿Es mi mejor opción un div oculto en el
? –hice esto agregando una letra en mi documento principal y la hice transparente y 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>
Hace poco estaba trabajando en un juego compatible con CocoonJS con DOM limitados para el elemento canvas - aquí es mi enfoque:
Usando fillText con una fuente que no ha sido todavía cargado ejecutará correctamente, pero con no hay 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, recorriendo getImageData buscando cualquier píxel no transparente) que sucederá cuando la fuente se cargue correctamente.
he explicado esta técnica un poco más en mi reciente artículo http://rezoner.net/preloading-font-face-using-canvas,686
Google tiene una buena biblioteca para esto: https://developers.google.com/webfonts/docs/webfont_loader se puede utilizar casi cualquier tipo de letra y de la librería se sumará a las clases de la etiqueta html.
¡Incluso le ofrece eventos de Javascript cuando las fuentes de certrain están cargadas y activas!
¡No olvides poner tus archivos de fuentes en gzip! ¡sin duda acelerará las cosas!
La precarga correcta de la fuente es un gran agujero en la especificación HTML5. He analizado todas estas cosas y la solución más confiable que he encontrado es usar Font.JS:
http://pomax.nihongoresources.com/pages/Font.js/
Se puede utilizar para cargar fuentes utilizando la misma API que se utiliza 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 más ligero que Google's hulking Webfont Loader
Aquí está el repositorio GitHub para Font.js:
Una técnica simple es poner esto en alguna parte en el í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 y el IE 11
Vía de 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
}
}
});
El hombre de arriba dio exactamente la misma respuesta 2 años antes ..¿Por qué te molestaste en escribirlo de nuevo? Tengo curiosidad – vsync
Mi respuesta solo da un fragmento de código que la gente puede usar para cargar varias fuentes usando webfontloader. La respuesta anterior ofrece una buena introducción a webfontloader, pero no contiene ningún fragmento de código. –
Debería haberlo editado en lugar de repetirlo, y agregar un ejemplo de código. es muy confuso y desperdicio de rollo tener respuestas casi idénticas que se repiten en las preguntas. – vsync
2017 : Ahora tiene preload
MDN: The preload valu e 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 iniciar la carga anticipada en el ciclo de vida de una página carga, antes se activa la maquinaria de renderizado principal del navegador. Esta garantiza que estén disponibles antes y es 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" />
Comprobar browser compatibility.
Es más útil para la precarga de fuentes (no esperando que el navegador lo encuentre en algunos CSS). También puede precargar algunos logotipos, iconos y scripts.
Utilice la norma CSS Font Loading API.
Esperar ( todas) las fuentes para cargar, y luego mostrar su contenido:
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
document.getElementById('waitScreen').style.display = 'none';
});
¿No puedes especificar altura/altura de línea para evitar el efecto de salto? – kangax
buen lugar para comenzar https://css-tricks.com/fout-foit-foft/ – TarranJones
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content –