Comment inclure des polices personnalisées à l'aide de .ttf et garantir la compatibilité entre navigateurs ?

Inclure des polices personnalisées à l'aide de .ttf et CSS

Vous souhaitez intégrer une police .ttf dans votre page Web mais rencontrez des difficultés. Examinons votre code :

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

Où est le problème ?

L'inclusion d'un seul fichier .ttf n'est pas suffisante pour assurer la compatibilité entre navigateurs. Pour couvrir un large éventail de navigateurs, vous avez besoin de plusieurs formats de police.

Solution complète :

<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 avez .eot, .woff, . formats ttf et SVG pour votre police Web. Les générateurs de polices Web comme Font Squirrel ou Transfonter peuvent automatiser ce processus.

Approche moderne :

Les navigateurs modernes préfèrent les polices .woff, vous pouvez donc également simplifier votre code :

<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 :

• Astuces CSS : Utilisation de @font-face : https://css-tricks.com/snippets/css/using -font-face/
• Puis-je utiliser fontface : 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!