html - que - ¿Web Font Loader no almacena en caché las fuentes?

woff2 que es

Question

Solo quería probar la capacidad del Web Font Loader y, sorprendentemente, he descubierto que cuando necesito cargar la misma fuente en otra página, el cargador realiza una nueva descarga en lugar de usar una versión en caché de la fuente. ¿Esto es normal? Si es así, ¿hay una forma sencilla de verificar si la fuente está disponible para el navegador, en otras palabras, si está almacenada en caché?

Así es como cargo la fuente:

 <script>
    WebFont.load({
        custom: {
            families: [''Univers45custom'', ''Univers45customIE'']
        }
    });
</script>

Estoy usando Web Font Loader v1.5.10 .

Addendum de BramVanroy: esta ''falta de almacenamiento en caché'' también está presente cuando se usan las fuentes web de Google. FOUT (un destello de texto sin estilo) ocurre brevemente en un sitio web que usa el cargador de fuentes incluso después de volver a cargar la página varias veces.

Edit by eldi: Hola BramVanroy -> Ahora mismo no estoy muy seguro de cómo resolví este problema, pero probablemente acabo de usar @font-face . La razón por la que probé el cargador de fuentes web fue el FOUT en primer lugar. El cargador agrega la clase css al elemento html que le proporciona una forma de estilizar su página sin la fuente correcta, cuando las fuentes se cargan, la clase desaparece y su estilo "estándar" está presente. Funcionó como se esperaba pero con la excepción de "falta de almacenamiento en caché", que en mi situación no era aceptable. Creo que la solución de Staypuftman con la modificación del encabezado HTTP haría el trabajo, no tengo tiempo para probarlo, especialmente necesitaría investigar un poco para encontrar la manera de configurarlo en el proveedor de alojamiento de asp.net, ya que configurarlo desde la aplicación añadir tiempo de procesamiento adicional.

Answer 1

Web Font Loader no tiene una disposición de almacenamiento en caché, pero su navegador almacena en caché la fuente si, y solo si , la está utilizando en algún lugar en su sitio. Asegúrese de que la fuente se invoca en la página en cuestión en algún lugar.

Puede asegurarse de que las cosas se almacenen en la memoria caché forzando el encabezado de control de la caché de HTTP ( es probable que esto suceda en Google Developers ). Por lo general, configuro esto a través de Apache, así (hay muchas otras formas de hacerlo):

#Set cache-control HTTP header for public with max time
Header set Cache-Control "max-age=290304000, public"

Si todo eso falla, la mejor manera de pensar en tomar los asuntos en sus propias manos sería establecer una cookie, verificarla y cargar las fuentes en consecuencia. En tu situación, el código se vería así:

// 1- Check for cookie, if it''s not present we enter this conditional
if (!font_is_cached) {
  $(window).load(function() {

    // 2- Load your webfont, this would put the font in cache
    WebFont.load({
      custom: {
          families: [''Univers45custom'', ''Univers45customIE'']
      }
    });

    // 3- Set cookie indicating fonts are cached
    // This leverages Filament Group''s cookie.js as a dependency
    // https://github.com/filamentgroup/cookie/blob/master/cookie.js
    // Sets a one-day session cookie
    cookie( "font_is_cached", "true", 1 );
  });
}

Recursos adicionales

• Filament Group tiene un gran resumen de la carga de fuentes . No usan el cargador de fuentes web, pero podrías seguir lo que están haciendo.
• Los trucos de CSS describen algo similar a lo que tengo en mente, pero están configurando explícitamente la cookie en el back-end antes de realizar la función de verificación / configuración de front-end que presenté.

Answer 2

WebFont Loader almacenará en caché la fuente en el navegador web durante el siguiente año. Aquí encontrará información detallada sobre cómo puede cargar en casa el detalle final de Webfont durante mucho tiempo en la memoria caché del navegador.

http://peterwilson.cc/caching-google-webfont-loader/

Cargador de fuentes web

Web Font Loader le brinda control adicional cuando usa fuentes vinculadas a través de @font-face . Proporciona una interfaz común para cargar fuentes independientemente de la fuente, y luego agrega un conjunto estándar de eventos que puede utilizar para controlar la experiencia de carga. El Web Font Loader puede cargar fuentes de Google Fonts , Fontdeck , Fontdeck y Fontdeck , así como fuentes web auto alojadas. Está co-desarrollado por Google y Typekit .