web-dev-qa-db-fra.com

visage de police avec un mauvais type MIME dans Chrome

C'est le @font-face déclaration que j'ai utilisée:

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

Cela fonctionne parfaitement dans Firefox mais pas dans Chrome. Après "inspecter l'élément", j'ai reçu le message suivant:

Ressource interprétée comme une police mais transférée avec une application de type MIME/octet-stream.

Toute suggestion sera appréciée.

cssgoogle-chromefont-face
37
moonstruck

Comme d'habitude, différents navigateurs ont des besoins différents. Voici une déclaration croisée @fontface du navigateur, tirée du blog Paul Irish -

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

.eot est pour IE, le reste des navigateurs utilise soit .woff soit .ttf Si vous avez besoin de générer les différents types à partir de la police source, vous pouvez utiliser le Font Squirrel's générateur de polices

Vous avez également besoin d'un .htaccess à l'emplacement des polices en ajoutant les types suivants:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
76
Eran Galperin

Vos fichiers de polices ne sont pas transférés avec le type MIME approprié. Il s'agit d'un problème de configuration du serveur Web qui peut facilement être résolu.

Pour nginx, fusionnez-le avec la configuration des types existants, généralement trouvée dans le /etc/nginx répertoire:

types {
    application/vnd.ms-fontobject    eot;
    application/x-font-woff    woff;
    font/otf    otf;
    font/ttf    ttf;
}

Pour Apache, ajoutez ces lignes à .htaccess trouvé dans la racine de votre document:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
4
jchook

Vous pouvez ignorer l'avertissement et vous pouvez envisager ce message sur le sujet, type MIME approprié pour les polices

Qui mentionne également les éléments suivants:

"Remarque: dans la mesure où aucun type MIME n'est défini pour les polices TrueType, OpenType et WOFF, le type MIME du fichier spécifié n'est pas pris en compte."

source: http://developer.mozilla.org/en/css/@font-face

4
Domokun

Si vous exécutez un serveur avec nodeJS, ceci est un module sympa pour mapper vos types de mime

https://github.com/broofa/node-mime

0
Daan

si vous pouvez modifier un fichier .htaccess, vous devez essayer d'ajouter

addType font/ttf .ttf

sinon vous pouvez utiliser une police svg/svgz à la place

0
fcalderan