Pourquoi ma police .ttf n'apparaît-elle pas dans ma page Web ?

Inclure une police .ttf à l'aide de CSS

Lorsque vous essayez d'incorporer une police globale pour une page Web à l'aide d'un fichier .ttf, vous pouvez rencontrer des problèmes si votre police ne change pas. Voyons la cause possible :

Dépannage du code

Le code fourni ne dispose pas d'un élément critique pour la compatibilité entre navigateurs. En plus du fichier .ttf, vous devez fournir des formats alternatifs pour différents navigateurs :

<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>

Outils d'automatisation

Pour simplifier le processus de génération de ces multiples polices formats, vous pouvez utiliser des outils comme Font Squirrel ou Transfonter.

Prise en charge des navigateurs modernes

Pour les navigateurs modernes, vous pouvez opter pour une approche plus concise :

<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

• https://css-tricks.com/snippets/css/using-font-face/
• https : //caniuse.com/#feat=fontface (pour les informations de prise en charge du navigateur)

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!