Wie kann ich unnötige Schriftarten-Downloads mit @font-face für lokal installierte Schriftarten vermeiden?

@font-face src: local – Vermeidung unnötiger Schriftarten-Downloads für installierte Schriftarten

@font-face ermöglicht Ihnen die Definition benutzerdefinierter Schriftarten in Ihr CSS. Allerdings kann es manchmal zu unnötigen Schriftarten-Downloads kommen, wenn der Benutzer die Schriftart bereits lokal installiert hat. Dies kann ein Leistungsproblem darstellen, insbesondere für Browser, die Schriftarten für jede Instanz der @font-face-Deklaration herunterladen.

Um dieses Problem zu mildern, kann das Schlüsselwort „local“ in der @font-face-Regel verwendet werden um den Browser anzuweisen, vor dem Versuch, sie herunterzuladen, nach der lokalen Schriftart zu suchen. Der folgende Codeausschnitt zeigt, wie das Schlüsselwort „local“ verwendet wird:

<code class="css">@font-face {
  font-family: 'DejaVu Serif';
  src: local('DejaVu Serif'),
       url('DejaVuSerif-webfont.woff') format('woff'),
       url('DejaVuSerif-webfont.ttf') format('truetype'),
       url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
  font-weight: normal;
  font-style: normal;
}</code>

Durch Platzieren des Schlüsselworts „local“ vor allen URL-basierten Quellen versucht der Browser zunächst, die lokal installierte Schriftart DejaVu Serif zu verwenden . Wenn die lokale Schriftart nicht verfügbar ist, lädt der Browser die Schriftart von den bereitgestellten URL-Quellen herunter.

Dieser Ansatz stellt sicher, dass der Browser die Schriftart nur bei Bedarf herunterlädt, wodurch die Gesamtleistung der Website für Benutzer verbessert wird Habe die Schriftart bereits installiert.

Das obige ist der detaillierte Inhalt vonWie kann ich unnötige Schriftarten-Downloads mit @font-face für lokal installierte Schriftarten vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!