Échec du décodage de la police téléchargée, erreur d'analyse OTS: balise de version non valide + rails 4


136

Je suis en train de pré-compiler les actifs et d'exécuter l'application en mode production. Après la compilation, lorsque je charge ma page d'index, j'ai reçu les avertissements suivants dans la console Chrome:

Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag

Le problème est que les icônes ne se chargent pas au lieu de montrer des carrés .

nous avons utilisé les polices personnalisées et le code est:

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

Je ne sais pas ce qui manque à ma fin. J'ai beaucoup cherché et essayé une solution, mais je n'ai pas obtenu de succès.


2
Cela peut être dû à un certain nombre de choses: le codage des caractères peut être incorrect ou la police elle-même peut être corrompue. Pouvez-vous ouvrir la police dans Font Book ou similaire? Un rapide Google révèle un bogue dans la version 45 du navigateur Chromium: code.google.com/p/chromium/issues/detail?id=545924
Craig le

avez-vous pu résoudre le problème?
coder

1
Dans mon cas, je dois purger le cache cloudflare et attendre quelques minutes pour laisser le temps résoudre le problème!
HoseinGhanbari

J'ai eu le même problème et j'ai trouvé que je devais avoir la police woff2 avant woff pour chrome.
jcubic

Réponses:


138

J'ai eu exactement la même erreur, et dans mon cas, cela s'est avéré être dû à un mauvais chemin pour la @font-facedéclaration. L'inspecteur Web ne s'est jamais plaint d'un 404 puisque le serveur de développement que nous utilisons (live-server) a été configuré pour servir le fichier index.html par défaut sur n'importe quel 404: s. Sans connaître les détails de votre configuration, cela pourrait être un coupable probable.


1
Si c'est la raison de la redirection, vous pouvez le filtrer par extension de fichier RewriteRule! \. (Js | gif | css | jpg | otf | eot | png) $ / redirect [R = 301, L]
craint

Dans mon cas, le regroupement et la minification d'ASP.NET MVC ont essentiellement changé l'emplacement du CSS sans changer les chemins relatifs. J'ai dû supprimer le fichier déjà minifié et utiliser un fichier CssRewriteUrlTransformBundleConfig.
Sinjai

22

S'il est exécuté sur IIS en tant que serveur et .net 4 / 4.5, il se peut qu'il manque des définitions d'extension mime / fichier dans Web.config - comme ceci:

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>


16

J'avais le même problème., OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2

Si vous recevez ce message d'erreur en essayant de valider votre police, il s'agit d'un problème avec .gitattributes " warning: CRLF will be replaced by LF"

La solution consiste à ajouter la police avec laquelle vous rencontrez le problème dans .gitattributes

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Ensuite, j'ai supprimé les fichiers de polices corrompus et réappliqué les nouveaux fichiers de polices et fonctionne très bien.


où vit ce fichier? le navigateur saura-t-il même qu'il existe? Comment?
Omar

@Omar Ce fichier devrait être dans votre répertoire racine et n'a rien à voir avec le navigateur. Il décrit comment git va gérer les fins de ligne dans différents formats de fichiers. Git peut corrompre certains types de fichiers en essayant de changer les fins de ligne.
elliottregan le

5

essayer

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

et renommez votre fichier en application.css.scss


4

J'avais une police corrompue, même si elle semblait se charger sans problème et que sous Sources dans Chrome, les outils de développement semblaient s'afficher, le nombre d'octets n'était pas correct, j'ai donc téléchargé à nouveau et cela l'a résolu.


Si vous utilisez woff2, j'ai eu ce problème après avoir utilisé des convertisseurs en ligne. Nécessaire pour utiliser le convertisseur woff2 en ligne de commande (disponible via homebrew)
rob-gordon

4

Indiquez simplement le format à @ font-face comme suit:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}


3

J'ai eu le même problème et c'était à cause du git traitant ces fichiers comme du texte. Ainsi, lors de l'extraction des fichiers dans les agents de build, le binaire n'était pas maintenu.

Ajoutez ceci à votre .gitattributesfichier et essayez.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

2

Lors de l'utilisation angular-cli, voici ce qui fonctionne pour moi:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Ce serait formidable si vous pouviez dire, pour quel fichier vous devez les ajouter?
Saiyaff Farouk

1
Modifier le web.config
Skorunka František

Je n'ai pas pu déposer de fichier web.config dans le projet angular-cli. En utilisant la version 1.3.0. Un indice?
Saiyaff Farouk

Web.config n'est utilisé que lorsque vous hébergez votre application cliente sur IIS (y compris Azure Web Services).
Skorunka František

2

J'obtenais les erreurs suivantes:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

qui a été corrigé après le téléchargement du fichier brut directement à partir de:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Le problème était qu'il y avait une erreur de proxy lors du téléchargement du fichier (il contenait le message d'erreur HTML).


Je n'ai pas pensé à vérifier le fichier lui-même .. assurez-vous également de ne pas télécharger ce lien directement ("enregistrer le lien sous"), mais entrez-le et utilisez le bouton "télécharger".
omadawn

2

Accédez à l'adresse ci-dessous sur GitHub et téléchargez chacun des fichiers FontAwesome.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... mais au lieu de cliquer avec le bouton droit et d'enregistrer le lien sous, cliquez sur chacun des fichiers et utilisez le bouton «Télécharger» pour les enregistrer.

J'ai trouvé que l'enregistrement du lien était téléchargé sur une page HTML et non sur le fichier binaire FontAwesome lui-même.

Une fois que j'ai eu tous les binaires, cela a fonctionné pour moi.


1

Mon problème était que je déclarais deux polices, et scss semble s'attendre à ce que vous déclariez le nom de la police.

après votre @font-face{} vous devez déclarer $my-font: "OpenSans3.0 or whatever";

et ceci pour chaque font-face.

:-)


Parlez-vous de font-family?
Nadav B

Je ne me souviens plus, désolé :-)
Antoine

1

Pour les utilisateurs d' angular-cli et de webpack , je soupçonnais qu'il y avait un problème lors de l'importation des polices dans un fichier css, veuillez donc également fournir l'emplacement de l'url codé avec des guillemets simples comme suit -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Ce post est peut-être vieux, mais c'est la solution qui a fonctionné pour moi.


1

J'ai eu le même problème.

L'ajout de la version de la police (par exemple ?v=1.101) aux URL de police devrait faire l'affaire;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Cliquer (clic droit de la souris) sur la version TTF de la police et sélectionner «Obtenir des informations» (Mac OSX) «Propriétés» (Windows) dans le menu contextuel devrait suffire pour accéder à la version de la police.


0

Si vous utilisez Chrome, essayez d'ajouter une version opentype (OTF) de votre police comme indiqué ci-dessous:

    ...
     url('icomoon.otf') format('opentype'),
    ...

À votre santé!


0

Si vous utilisez bootstrap, mettez à jour le bootstrap.min.cssfichier bootstrap css ( ) et les fichiers de polices. J'ai résolu mon problème avec cette solution.


0

J'utilise ASP.NET avec IIS et il s'avère que j'avais juste besoin d'ajouter le type MIME à IIS: '.woff2' / 'application / font-woff'


0

Après avoir essayé de nombreuses autres approches et de nombreuses réinstallations et vérifications, je viens de résoudre le problème en supprimant les données de navigation de Chrome (images et fichiers en cache), puis en actualisant la page.


0

J'ai eu le même problème lorsque j'ai ouvert et enregistré .woffet. woff2fichiers via Sublime Text avec EditorConfigoption end_of_line = lf. Je viens de copier des fichiers dans le dossier de polices sans les ouvrir dans Sublime et le problème a été résolu.


0

Si les autres réponses ne fonctionnent pas, essayez:

  1. vérifier le fichier .htaccess

    # Fonts
    # Add correct content-type for fonts

    AddType application/vnd.ms-fontobject .eot
    AddType application/x-font-ttf .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType application/x-font-woff2 .woff2
    AddType image/svg+xml .svg

  2. effacer le cache du serveur

  3. vider le cache du navigateur et recharger

0

Vérifiez le fichier css de votre police. (fontawesome.css / fontawesome.min.css) , vous verrez comme ceci:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

vous verrez la balise de version après le nom d'extension de fichier de votre police . Comme:

-v = 4,6,3

Il vous suffit de supprimer cette balise de votre fichier css. Après avoir supprimé cela, vous devez aller dans votre dossier de polices, et vous verrez: entrez la description de l'image ici

Et, dans les fichiers de ces polices, il vous suffit de supprimer la balise de version -v = 4.6.3 du nom de fichier.

Ensuite, le problème sera réglé.


0

juste au cas où cela serait pertinent pour quelqu'un. J'ai eu exactement la même erreur en utilisant ASP.NET et C # dans Visual Studio. Lorsque j'ai démarré l'application depuis le studio visuel, cela fonctionnait, mais j'ai eu ce problème. En attendant, il s'est avéré que le chemin d'accès à mon projet contenait le caractère «#» (c: \ C # \ testapplication). Cela semble confondre IIS Express (peut-être aussi IIS) et provoque ce problème. Je suppose que "#" est un caractère réservé quelque part dans ASP.NET ou en dessous. Changer le chemin a aidé et maintenant cela fonctionne comme prévu.

Cordialement Christof


a quel problème exactement?
Nelles le

codeÉchec du décodage de la police téléchargée: localhost: 52963 / css /…
x-of Rezbach

0

Ce qui m'a aidé, c'est que j'ai changé l'ordre. Le .eot est chargé en premier, mais mon erreur est sur le chargement du .eot. J'ai donc abandonné le .eot comme premier src pour woff2 et l'erreur a disparu.

Donc, le code est maintenant:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

Et c'était:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

-1
For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

7
Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
andreas

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.