Comment inclure une police .ttf dans CSS pour une compatibilité optimale entre navigateurs ?

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

• Guide CSS-Tricks : https://css-tricks.com/snippets/ css/using-font-face/
• Support du navigateur : https://caniuse.com/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!