Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig?

Website -Integration Lokale Schriftart: Lösen Sie das Displayproblem von "Jingnan Mai Round"

Wie kann ich nach erfolgreicher Installation der Systemschrift "auf der Webseite sie richtig aufrufen? In diesem Artikel wird gelöst, wie die lokal installierte Schriftart "Jingnan Mai Round" auf der Website verwendet wird, und vermeiden Sie src -Attribut, um Schriftartdateien direkt einzuführen (weil die Datei größer ist).

Hier ist ein gemeinsamer CSS -Code -Snippet, der versucht, lokale Schriftarten zu verwenden:

 /* @font-face {
    Schriftfamilie: 'MyFont';
    SRC: URL ('/style1/font/jingnanmai rund body.otf') Format ('TrueType');
} */
html, Körper {
    Schriftgröße: 18px;
    Schriftfamilie: "Jingnan Mai Round Body", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

Obwohl "Jingnan Mai Round" ganz oben auf der Schriftliste platziert ist, wird auf der Webseite "Microsoft Yahei" weiterhin angezeigt. Das Problem ist, dass der Browser den lokal installierten Schriftart -Dateipfad nicht direkt erkennen kann.

Lösung:

Wir müssen den CSS -Code korrigieren und benutzerdefinierte Schriftarten korrekt definieren und anwenden.

1. Definieren von Schriftarten ( @font-face): Obwohl wir src nicht verwenden, um Schriftdateien direkt einzuführen, benötigen wir die @font-face -Regel, um dem Browser den Schriftnamen zu mitteilen. Der Schlüssel ist, dass wir den Schriftart -Dateipfad nicht angeben müssen und der Browser automatisch aus der Systemschriftbibliothek nachgibt.

    @font-face {
       Schriftfamilie: 'Jingnanmaiyuanti'; /* Verwenden Sie einen saubereren Schriftnamen*/
   }

2. Schriftart anwenden: Verwenden Sie in font-family den in Schritt 1 definierten Schriftartamen.

    html, Körper {
       Schriftgröße: 18px;
       Schriftfamilie: 'Jingnanmaiyuanti', "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
   }

Durch die obigen Modifikationen hat der Browser die Verwendung einer Systemschrift "Jingnanmaiyuanti" Priorität. Wenn die Schriftart im System installiert ist, wird die Webseite korrekt angezeigt. Wenn nicht installiert, werden alternative Schriftarten wiederum verwendet.

Zusätzliche Vorschläge:

• Schriftart Name: Verwenden Sie einen einfacheren, leicht zu merktenden Schriftnamen wie JingNanMaiYuanTi und vermeiden Sie die Verwendung von Namen mit Leerzeichen oder Sonderzeichen.
• Browser -Cache: Löschen Sie nach dem Ändern von CSS den Browser -Cache oder starten Sie den Browser neu, um sicherzustellen, dass der Browser die neuesten CSS -Regeln lädt.

Mit diesen Anpassungen sollten Sie in der Lage sein, die Schriftart "Jingnan Mai Round" auf der Webseite erfolgreich anzuzeigen und gleichzeitig Probleme mit der direkten Einführung von Schriftdateien zu laden.

Das obige ist der detaillierte Inhalt vonWie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!