css - inspeccionar - ¿Por qué Firefox vuelve a solicitar fuentes cuando se cambia el tamaño de la página?

inspeccionar elemento teclado (6)

Algunas fuentes no funcionan muy bien en ciertos tamaños, así que cuando aumente o disminuya el tamaño de la fuente, lo que hará Firefox es cambiar la fuente a algo muy similar. Puede probar esto revisando todas las fuentes y cambiando el tamaño de fuente lentamente. Algunas de las fuentes están tan cerca unas de otras que ni siquiera notará la diferencia, así que tenga cuidado.

Tengo un sitio Bootstrap3 bastante simple con algunas fuentes personalizadas incrustadas en el CSS con reglas @font-face . Funciona muy bien. Las páginas están siendo generadas por Django, así que cuando lo estoy probando también puedo ver las solicitudes locales que hace el navegador.

Cuando cambio el tamaño de la ventana del navegador, veo cientos de solicitudes de fuentes:

127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 - 127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1"

Todo por las mismas fuentes personalizadas. Una y otra y otra vez hasta que dejo de cambiar el tamaño.

Me doy cuenta de que la mayoría de las personas no cambian el tamaño de su navegador a menudo, pero ¿por qué Firefox está haciendo esto? ¿Puedo detenerlo?

Chrome no muestra este comportamiento.

Así es como se ve el archivo con curl . Parece tener el tipo de contenido correcto y no hay cosas extracaching extrañas allí.

HTTP/1.0 200 OK Last-Modified: Sun, 30 Nov 2014 22:53:43 GMT Content-Length: 65452 Content-Type: application/x-font-woff Server: Werkzeug/0.9.4 Python/2.7.4 Date: Thu, 04 Dec 2014 14:13:57 GMT

Dando un vistazo a esto, pero con FF viene un montón de personalización (especialmente si está ejecutando complementos).

¿Está ejecutando cualquier sobrescritura de CSS de página a través de un complemento / complemento a través del navegador local?
¿Hay una actualización de versión disponible para su instalación de FF?
¿Aparece el problema en SBX / testing o también aparece "in the wild" en otra computadora? Cuando pruebo el navegador, prefiero probar en varias máquinas (y tipos de dispositivos) para aislar los problemas de configuración local.
¿Has pasado por alguna prueba de render de tornasol / página?

Firefox utiliza un motor de renderización diferente (Gecko) en comparación con Chrome (Blink), lo que podría explicar el comportamiento de representación diferente. Sin embargo, como no hay información o documentación explícita sobre este tema, no se puede dar una respuesta concreta. Lo mejor es llevar esto a Mozilla y, mientras tanto, ver si puede usar una alternativa a @ font-face si eso obstaculiza su trabajo.

La publicación de blog Woff and Caching * sugiere que al utilizar un tipo MIME incorrecto / desconocido, la fuente no se almacenará en caché y se solicitará nuevamente cada vez que sea necesario. En el artículo, sin embargo, no usan el tipo correcto, ya que no se ha estandarizado en ese momento.

El artículo es bastante viejo, de 2010 y podría no ser relevante más, pero usar el tipo MIME correcto ciertamente no hará daño. El tipo MIME correcto para WOFF es application/font-woff .

_{* Publicado originalmente por Bes pero eliminado por un ♦.} _{Aunque no explica por qué la fuente debe solicitarse nuevamente al cambiar el tamaño, creo que aún podría ser útil considerar los problemas de almacenamiento en caché.}

Me encontré con este mismo problema de recarga de fuentes en Firefox en cada tamaño de ventana del navegador. Resulta que tenía que ver con la especificación de fuentes local() que no se instalaron localmente, antes de especificar las fuentes url() .

Si uso el siguiente CSS:

@font-face { font-family: ''Roboto''; font-style: normal; font-weight: 400; src: local(''Roboto''), local(''Roboto-Regular''), url("../fonts/Roboto-Regular.woff2") format(''woff2''), url("../fonts/Roboto-Regular.ttf") format(''truetype''); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }

el comportamiento aparece en Firefox si no tengo instalado Roboto-Regular localmente, si luego instalo Roboto-Regular localmente, el problema desaparece. Como no esperaba que todos tuvieran Roboto-Regular instalado localmente, eliminé las referencias de fuentes local() de la etiqueta src @font-face .

@font-face { font-family: ''Roboto''; font-style: normal; font-weight: 400; src: url("../fonts/Roboto-Regular.woff2") format(''woff2''), url("../fonts/Roboto-Regular.ttf") format(''truetype''); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; }

Eso lo arregla para mí. No más recarga de fuentes no deseadas en cada tamaño de ventana del navegador.

Otros han sugerido esto para FF:

<FilesMatch "/.(ttf|otf|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>