Inclure une police .ttf dans CSS : guide complet
Pour incorporer une police personnalisée dans votre page Web, CSS utilise le @font- règle du visage. Cependant, le simple fait d'inclure un fichier .ttf peut ne pas suffire pour assurer la compatibilité entre navigateurs.
Combinaison optimale de fichiers de polices
Pour une compatibilité optimale, il est recommandé d'utiliser plusieurs polices. formats de fichiers :
<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>
Ce code suppose que vous disposez des formats de police .eot, .woff, .ttf et svg. Pour simplifier le processus, utilisez un générateur de polices Web comme Font Squirrel ou Transfonter.
Approche moderne : type de police WOFF
Les navigateurs modernes prennent en charge le type de police .woff. Vous pouvez simplifier votre code avec :
<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!