Warum wird meine .ttf-Schriftart auf meiner Website nicht richtig angezeigt?

Einbindung einer .ttf-Schriftart über CSS

Problem:

Bei einem Implementierungsversuch Als globale Schriftart für eine Webseite wurde eine .ttf-Datei in CSS eingebunden. Allerdings wird die Schriftart nicht wie vorgesehen angezeigt.

Codeausschnitt:

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

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

Ursache:

In Bei der Implementierung von Web-Schriftarten reicht die alleinige Bereitstellung einer .ttf-Datei für die browserübergreifende Kompatibilität nicht aus.

Lösung:

Um die Kompatibilität zwischen verschiedenen Browsern zu unterstützen, ist eine Kombination mehrerer Schriftarten erforderlich Formate werden empfohlen:

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

Alternativer Ansatz:

Für eine verbesserte Browserunterstützung empfehlen moderne Browser die Wahl des .woff-Schriftformats:

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

Zusätzliche Ressourcen:

• CSS-Tricks: Verwendung von @font-face: https://css-tricks.com/snippets/css/using-font-face/
• Kann ich Fontface verwenden: https://caniuse.com/?feat=fontface

Das obige ist der detaillierte Inhalt vonWarum wird meine .ttf-Schriftart auf meiner Website nicht richtig angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!