Maison >interface Web >tutoriel CSS >Pourquoi ma police .ttf n'apparaît-elle pas dans ma page Web ?

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

DDD
DDDoriginal
2024-11-05 12:14:02370parcourir

Why is My .ttf Font Not Showing Up in My Web Page?

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!

Déclaration:
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