Wie verwende ich lokale Schriftarten in @font-face-Deklarationen, um die Webleistung zu optimieren?

@font-face: Nutzung lokaler Schriftarten ohne Browser-Downloads

Um die Webleistung zu optimieren, laden Browser häufig über @ angegebene Schriftarten herunter. Font-Face-Deklarationen. Dies kann überflüssig sein, wenn das System des Benutzers bereits über die Schriftart verfügt. Um dies zu vermeiden, sollten Sie die Verwendung des Schlüsselworts „local“ in Ihrer @font-face-Deklaration in Betracht ziehen.

Anwenden des Schlüsselworts „local“

Das Schlüsselwort „local“ ermöglicht es Ihnen um auf die Schriftart mit ihrem vom System installierten Namen zu verweisen. Um dies zu nutzen, geben Sie einfach Folgendes an:

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'), ...;
}</code>

Indem Sie „local“ an die erste Stelle in der src-Liste setzen, versuchen Browser, die lokal installierte Version von DejaVu Serif zu verwenden, bevor sie sie herunterladen.

Weitere Optimierungen

Für eine umfassendere Schriftoptimierung beachten Sie die folgenden Schritte:

• Geben Sie mehrere Schriftformate an: Dies verbessert die Kompatibilität zwischen verschiedenen Browsern.
• Verwenden Sie einen Schriftarten-Hosting-Dienst: Dienste wie Font Squirrel stellen optimierte Web-Schriftarten bereit und verwalten das Caching für eine verbesserte Leistung.
• Nutzen Sie die CSSFontLoading-API: Mit dieser API können Sie überprüfen, ob eine Schriftart geladen und bereit ist zur Verwendung, wodurch unnötiges Laden von Schriftarten reduziert wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich lokale Schriftarten in @font-face-Deklarationen, um die Webleistung zu optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!