Pourquoi ma police .ttf ne s'affiche-t-elle pas correctement sur mon site Web ?

Incorporation d'une police .ttf via CSS

Problème :

Dans une tentative de mise en œuvre une police globale pour une page Web, un fichier .ttf a été inclus dans CSS. Cependant, la police ne s'affiche pas comme prévu.

Extrait de code :

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

html, body, div, span, ... {
    font-family: oswald;
}</code>

Cause fondamentale :

Dans implémentation de polices Web, la seule fourniture d'un fichier .ttf est insuffisante pour la compatibilité entre navigateurs.

Solution :

Pour prendre en charge la compatibilité entre différents navigateurs, une combinaison de plusieurs polices formats est recommandé :

<code class="css">@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compatibility Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, iOS, Android */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}</code>

Approche alternative :

Pour une meilleure prise en charge des navigateurs, les navigateurs modernes recommandent d'opter pour le format de police .woff :

<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/?feat=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!