Comment obtenir la compatibilité entre navigateurs pour les polices personnalisées avec @font-face ?

Compatibilité entre navigateurs pour les polices personnalisées avec @font-face

La règle @font-face permet l'inclusion de polices personnalisées dans un page web. Cependant, comme les différents navigateurs ont des exigences différentes, la compatibilité entre navigateurs peut parfois poser un défi.

Considérez la déclaration @font-face suivante :

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

Bien que cette déclaration puisse fonctionner de manière transparente dans Firefox, il peut rencontrer des erreurs dans Chrome. La fonctionnalité « Inspecter l'élément » de Chrome peut afficher le message :

Resource interpreted as font but transferred with MIME type application/octet-stream.

Pour résoudre ce problème et garantir la compatibilité entre plusieurs navigateurs, il est essentiel d'utiliser une déclaration @font-face complète qui inclut plusieurs formats de police. . La déclaration suivante, compatible avec tous les navigateurs, fournie par Paul Irish, peut être utilisée :

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

Dans cette déclaration :

• .eot est le format d'Internet Explorer.
• Les autres navigateurs utilisent les formats .woff ou .ttf.

Si nécessaire, vous pouvez générer différents formats de police à l'aide d'outils en ligne tels que le générateur de polices de caractères de Font Squirrel.

De plus, pour servir correctement les fichiers de polices, vous devrez ajouter un fichier .htaccess à l'emplacement des polices et spécifier les types MIME suivants :

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

En suivant ces étapes, vous peut garantir que vos polices personnalisées sont correctement affichées et rendues sur différents navigateurs, améliorant ainsi l'expérience utilisateur et l'attrait esthétique de votre page Web.

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!