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

Einbinden einer .ttf-Schriftart mithilfe von CSS

Wenn Sie versuchen, eine globale Schriftart für eine Webseite mithilfe einer .ttf-Datei einzubinden, können Sie dies tun Es treten Probleme auf, wenn sich Ihre Schriftart nicht ändert. Lassen Sie uns die mögliche Ursache beheben:

Fehlerbehebung am Code

Dem bereitgestellten Code fehlt ein entscheidendes Element für die browserübergreifende Kompatibilität. Zusätzlich zur .ttf-Datei müssen Sie alternative Formate für verschiedene Browser bereitstellen:

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

Automatisierungstools

Um den Prozess der Generierung dieser mehreren Schriftarten zu vereinfachen Formate können Sie Tools wie Font Squirrel oder Transfonter verwenden.

Unterstützung für moderne Browser

Für moderne Browser können Sie sich für einen prägnanteren Ansatz entscheiden:

<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

• https://css-tricks.com/snippets/css/using-font-face/
• https: //caniuse.com/#feat=fontface (für Informationen zur Browserunterstützung)

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