Maison > interface Web > tutoriel CSS > Pourquoi ma police personnalisée s'affiche-t-elle dans Firefox mais pas dans Chrome ?

Pourquoi ma police personnalisée s'affiche-t-elle dans Firefox mais pas dans Chrome ?

Barbara Streisand
Libérer: 2024-10-25 13:01:30
original
871 Les gens l'ont consulté

Why is My Custom Font Displaying in Firefox but Not Chrome?

Chrome n'affiche pas la police personnalisée : incompatibilité de type MIME

Problème :

Une déclaration de police personnalisée utilisant @font-face s'affiche correctement dans Firefox mais échoue dans Chrome. Chrome signale une erreur : "Ressource interprétée comme police mais transférée avec application/octet-stream de type MIME."

Réponse :

Différents navigateurs prennent en charge différentes polices. Pour garantir la compatibilité entre navigateurs, utilisez une déclaration @font-face complète qui inclut plusieurs formats de police :

<code class="css">@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}</code>
Copier après la connexion

Le format .eot est destiné à Internet Explorer, tandis que les autres navigateurs utilisent .woff ou .ttf. . Générez les différents formats de polices à l'aide du générateur de polices de Font Squirrel si nécessaire.

De plus, ajoutez un fichier .htaccess au répertoire où se trouvent les polices et incluez les types MIME suivants :

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal