Wie priorisiert man lokale Schriftarten in @font-face-Regeln, um unnötige Downloads zu vermeiden?

Verwendung von @font-face: Lokale Schriftartpriorität

@font-face ist ein leistungsstarkes Tool zur Integration benutzerdefinierter Schriftarten in Webseiten. Es kann jedoch frustrierend sein, wenn der Browser die Schriftart herunterlädt, selbst wenn sie bereits auf dem System des Benutzers installiert ist.

Verstehen des Problems

Wenn Sie eine @font-face-Regel definieren, geben Sie an mehrere Quelldateien. Der Browser lädt normalerweise alle diese Dateien herunter und installiert die Schriftart. Standardmäßig werden lokal installierte Schriftarten nicht berücksichtigt.

Lösung: Lokale Dateien priorisieren

Um unnötige Downloads zu verhindern, können Sie lokale Dateien in Ihrer @font-face-Regel priorisieren. Hier ist die Syntax:

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

In diesem Beispiel prüft der Browser zunächst, ob die Schriftart mit dem Namen „MyFont“ lokal installiert ist. Ist dies der Fall, wird die lokale Version verwendet. Andernfalls lädt der Browser die Schriftart von der angegebenen URL herunter und installiert sie.

Erweiterte lokale Schriftartenerkennung

Die oben beschriebene Methode ist eine einfache Möglichkeit, lokale Dateien zu priorisieren. In einigen Fällen lädt der Browser die Schriftart jedoch möglicherweise trotzdem herunter, selbst wenn sie installiert ist. Um dies zu beheben, können Sie einen ausgefeilteren Ansatz verwenden:

<code class="css">@font-face {
  font-family: 'Green Sans Web';
  src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}</code>

Diese Regel definiert zwei lokale Namen für die Schriftart: „Green Web“ und „GreenWeb-Regular“. Beim Auflösen der Schriftart prüft der Browser zunächst, ob einer dieser lokalen Namen vorliegt. Wenn eine Übereinstimmung gefunden wird, wird die lokale Schriftart verwendet. Wenn nicht, lädt der Browser die Schriftart herunter.

Durch die Befolgung dieser Techniken können Sie sicherstellen, dass Ihre @font-face-Regeln lokalen Schriftarten Vorrang einräumen, wodurch unnötige Downloads reduziert und das Benutzererlebnis verbessert werden.

Das obige ist der detaillierte Inhalt vonWie priorisiert man lokale Schriftarten in @font-face-Regeln, um unnötige Downloads zu vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!