Maison >interface Web >tutoriel CSS >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
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!