Wie verwende ich lokal installierte Schriftdateien auf Webseiten?

Wenden Sie lokale installierte Schriftarten auf Webseiten an

Im Webdesign möchten Sie möglicherweise eine bestimmte Schriftart verwenden, die bereits im System installiert ist. Wenn Sie jedoch den Schriftnamen direkt in CSS verwenden, funktioniert dies jedoch nicht. In diesem Artikel wird zeigen, wie man lokal installierte Schriftarten in einer Webseite ordnungsgemäß aufruft.

Problem: Lokale Schriftarten können auf Webseiten nicht angezeigt werden

Angenommen, Sie haben die Schriftart "Jingnan Mai Round" installiert, aber den CSS -Code:

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

Immer noch "Microsoft Yahei" anstelle von "Jingnan Mai Round Body". Sie möchten Schriftdateien nicht über src -Attribut laden, da die Schriftdateien groß sind.

Lösung: Verwenden Sie @font-face -Regeln

Der Schlüssel zur Lösung dieses Problems ist die Verwendung der @font-face -Regel, mit der Sie benutzerdefinierte Schriftarten definieren und auf Webseitenelemente anwenden können. Da Sie lokal installierte Schriftarten verwenden möchten, müssen Sie den src -Pfad nicht angeben. Der Browser findet und verwendet automatisch die auf dem System installierten Schriftarten.

Der richtige CSS -Code lautet wie folgt:

 @font-face {
  Schriftfamilie: 'Jingnanmaiyuanti'; /* Definieren Sie den Schriftnamen, es wird empfohlen, den englischen Namen zu verwenden*/
}

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

Der Schlüssel ist:

1. Definieren Sie Schriftname: Definieren Sie einen leicht erkennbaren Schriftartamen (z. B. englischer Name) in der @font-face -Regel, um die Kompatibilitätsprobleme zu vermeiden, die sich aus chinesischen Namen ergeben können.
2. Verwenden Sie Schriftname: Verwenden Sie den in Schritt 1 in font-family definierten Schriftartamen. Der Browser priorisiert das Finden der diesem Namen entsprechenden Schriftart. Wenn nicht gefunden, werden alternative Schriftarten wiederum verwendet.

Versuchen Sie, den Browser -Cache zu aktualisieren oder den Browser neu zu starten, nachdem er den CSS -Code geändert hat. Stellen Sie sicher, dass Ihr Betriebssystem ordnungsgemäß installiert und aktiviert ist.

Das obige ist der detaillierte Inhalt vonWie verwende ich lokal installierte Schriftdateien auf Webseiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!