web-dev-qa-db-fra.com

Firefox @ font-face avec fichier local - police téléchargeable: échec du téléchargement

J'ai un problème avec l'utilisation d'une police accessible via une URL relative.

@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;
}

Lorsque j'accède à la page Web, la police ne fonctionne pas et je reçois ceci dans la console:

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

Accéder au fichier en copiant/collant l'URL dans la barre d'adresse du navigateur montre qu'il s'agit de l'URL correcte car je peux télécharger la police.

csscss3firefoxfontsfont-face
18
Charles Goodwin

Un coup de chapeau à la réponse de Jonathan Kew sur un entrée pertinente de mozilla bugzilla :

Je crois que cela fonctionne comme prévu. AIUI, le problème ici est que pour une page chargée depuis un fichier: // URI, uniquement les fichiers dans (ou sous) le fichier le même répertoire du système de fichiers est considéré comme "même origine", et placer ainsi la police dans un sous-arbre différent (../font/) signifie donc sera bloqué par des restrictions de politique de sécurité.

Vous pouvez vous détendre en définissant security.fileuri.strict_Origin_policy sur false dans about: config, mais comme cela donne à la page un accès à votre système de fichiers local entier, c’est quelque chose à utiliser avec prudence.

Pour résumer, le "correctif" sans réorganiser vos fichiers:

  • Ouvert sur: config
  • Définissez security.fileuri.strict_Origin_policy sur false
  • Méfiez-vous des implications pour la sécurité

Le meilleur moyen consiste toutefois à vous assurer que toutes les ressources sont accessibles sans d'abord restaurer le système de fichiers.

Remarque: la politique d'origine est calculée en fonction du code HTML, PAS du fichier css! Il est donc possible qu'un fichier de police situé à côté d'un fichier css ne fonctionne pas, ce qui est très déroutant. (Au moins c'est ce que je pensais être le cas avec Firefox!)}

Suivis:

eradman commente:

C'est l'inverse: les chemins relatifs sont par rapport au fichier CSS .

chrylis répond:

Vous penseriez cela, mais le code dans Firefox ne semble pas être d'accord.

29
Charles Goodwin

@CharlesGoodwin @eradman En fait, les deux déclarations sur l'origine semblent vraies, à ceci près qu'elles parlent probablement de deux choses différentes: la vérification de la même origine est basée sur le fichier HTML d'origine, tandis que les URL relatives des polices sont résolues par règle @ font-face.

De plus, le fichier HTML d'origine n'est pas le fichier qui utilise la police. J'ai la structure de fichier locale suivante.

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

fonts.css references myfont.css via url (../ fonts/myfont.woff) et toc.htm reference fonts.css via <link ... href = "../dcommon/css/fonts.css"> . index.htm a un hyperlien vers toc.htm . Maintenant, j'ai mis en favori les deux index.htm et toc.htm . Si j'utilise le index.htm bookmark, la police est correctement rendue. Si j'utilise le toc.htm bookmark, la police ne se charge pas. J'imagine que c'est parce que myfont.woff est dans un sous-répertoire du répertoire contenant index.htm mais pas du répertoire contenant toc.htm .

Observé dans Firefox 38.6.

3
Sergiusz Wolicki

Essayez d'ajouter ceci à votre 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>
0
Dan Leksell

Cela se produit généralement lorsque le css source d'origine a une déclaration de police relative comme so ../fonts/some-font.woff et que vous compilez ce CSS source en bundle.css, qui se trouve sur un autre chemin. Ainsi, vous perdez le chemin de la police.

0
shimanskybiz