css - multiple - Firefox @ font-face con archivo local-fuente descargable: la descarga falló

font face otf

Question

Tengo un problema con el uso de una fuente a la que se accede a través de una URL relativa.

@font-face {
    font-family: ''ElegantIcons'';
    src:url(''../src_main/fonts/ElegantIcons.eot'');
    src:url(''../src_main/fonts/ElegantIcons.ttf'') format(''truetype''),
        url(''../src_main/fonts/ElegantIcons.svg#ElegantIcons'') format(''svg''),
        url(''../src_main/fonts/ElegantIcons.woff'') format(''woff''),
        url(''../src_main/fonts/ElegantIcons.eot?#iefix'') format(''embedded-opentype'');
    font-weight: normal;
    font-style: normal;
}

Cuando accedo a la página web, la fuente no funciona y en la consola obtengo esto:

downloadable font: download failed (font-family: "ElegantIcons" style:normal weight:normal stretch:normal src index:1): status=2147500037
source: file:///...snipped.../src_main/fonts/ElegantIcons.woff @ file:///...snipped.../src_poke/fonts-style.css

Al acceder al archivo copiando / pegando la URL en la barra de direcciones del navegador, se muestra que es la URL correcta, ya que puedo descargar la fuente.

Answer 1

@CharlesGoodwin @eradman En realidad, ambas afirmaciones sobre el origen parecen verdaderas, excepto que probablemente hablan de dos cosas diferentes: la verificación del mismo origen se basa en el archivo HTML de origen, mientras que las URL relativas para las fuentes se resuelven en relación con el archivo CSS que contiene el archivo. Regla de @ font-face.

Además, el archivo HTML de origen no es el archivo que utiliza la fuente. Tengo la siguiente estructura de archivos locales.

<base-directory>/index.htm
<base-directory>/ARPLS/toc.htm
<base-directory>/dcommon/css/fonts.css
<base-directory>/dcommon/fonts/myfont.woff

fonts.css hace referencia a myfont.css a través de url (../ fonts / myfont.woff) y toc.htm hace referencia a fonts.css a través de <link ... href = "../ dcommon / css / fonts.css"> . index.htm tiene un hipervínculo a toc.htm . Ahora, he marcado tanto index.htm como toc.htm . Si utilizo el marcador index.htm , la fuente se representa correctamente. Si utilizo el marcador toc.htm , la fuente no se carga. Supongo que esto se debe a que myfont.woff está en un subdirectorio del directorio que contiene index.htm pero no del directorio que contiene toc.htm .

Observado en Firefox 38.6.

Answer 2

Intenta agregar esto a tu web.config

<system.webServer>
<staticContent>
  <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
  <remove fileExtension=".woff" />
  <remove fileExtension=".woff2" />
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>

Answer 3

Por lo general, esto sucede cuando el css original de la fuente tiene una declaración de fuente de fuente relativa como tal ../fonts/some-font.woff , y compila esa fuente CSS en bundle.css que reside en alguna otra ruta. Así que de esa manera pierdes el camino a la fuente.

Answer 4

Un consejo sobre la respuesta de Jonathan Kew en una entrada relevante de mozilla bugzilla :

Creo que esto está funcionando como fue diseñado. AIUI, el problema aquí es que para una página cargada desde un archivo: // URI, solo los archivos en (o debajo) del mismo directorio del sistema de archivos se consideran "del mismo origen", por lo que colocar la fuente en un subárbol diferente (../font/) significa que estará bloqueado por restricciones de la política de seguridad.

Puede relajar esto configurando security.fileuri.strict_origin_policy en false en about: config, pero como esto le da a la página acceso a todo su sistema de archivos local, es algo que debe usarse con precaución.

Para resumir, el "arreglo" sin reorganizar sus archivos:

• Abrir sobre: ​​config
• Establezca security.fileuri.strict_origin_policy en false
• Cuidado con las implicaciones de seguridad

Sin embargo, la mejor manera es asegurarse de que se pueda acceder a todos los recursos sin tener que hacer una copia de seguridad del sistema de archivos primero.

Nota: la política de origen se calcula en función del html, NO del archivo css. Por lo tanto, un archivo de fuente además de un archivo css podría no funcionar, lo cual es muy confuso. (¡Al menos esto es lo que pensé que era el caso con Firefox!)

Seguimientos:

Comentarios de Eradman:

Es al revés: las rutas relativas son relativas al archivo CSS .

Chrylis responde:

Usted pensaría eso, pero el código real en Firefox no parece estar de acuerdo.