Pourquoi ma police TrueType personnalisée (.ttf) ne fonctionne-t-elle pas en CSS ?

Utiliser des polices personnalisées avec CSS : un guide complet

Styliser des pages Web avec des polices uniques peut améliorer l'expérience utilisateur et ajouter une touche de personnalité . Cependant, l’intégration de polices personnalisées présente ses propres défis. Un problème courant est rencontré lors de l'utilisation d'un fichier TrueType Font (.ttf) en CSS.

Problème :

Un utilisateur a inclus un fichier .ttf dans son code CSS. , mais la modification de police souhaitée n'est pas appliquée à la page. Le code ressemble à ceci :

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

Analyse :

Pour que les navigateurs affichent des polices personnalisées, il est important de leur fournir plusieurs formats de fichiers largement pris en charge . S'appuyer uniquement sur un fichier .ttf peut ne pas suffire pour assurer la compatibilité entre navigateurs.

Solution :

Pour garantir une prise en charge optimale des polices, la meilleure pratique consiste à utiliser une combinaison de formats de police :

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

Cette approche globale prend en charge divers navigateurs anciens et modernes. Pour rationaliser le processus, les utilisateurs peuvent utiliser des générateurs de polices Web comme Font Squirrel ou Transfonter.

Les navigateurs modernes, tels que Chrome 6 , Firefox 3.6 et IE 9 , donnent la priorité au format de police .woff. Par conséquent, une solution plus concise pour ces navigateurs pourrait être :

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  </code>

Ressources supplémentaires :

• Astuces CSS : https://css-tricks. com/snippets/css/using-font-face/
• Puis-je utiliser : https://caniuse.com/?search=fontface

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!