Maison > interface Web > tutoriel CSS > le corps du texte

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

Susan Sarandon
Libérer: 2024-11-05 21:47:02
original
727 Les gens l'ont consulté

How to Include a .ttf Font in CSS for Optimal Cross-Browser Compatibility?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal