Wie kann ich die Verwendung lokaler Schriftarten mit @font-face in CSS priorisieren?

@font-face src: local – Lokale Schriftarten zuverlässig nutzen

Beim Einbinden benutzerdefinierter Schriftarten in Ihren CSS-Code kann es vorkommen, dass Sie den Browser benötigen die Verwendung lokal installierter Schriftarten zu priorisieren, anstatt sie von einer Remote-Quelle herunterzuladen. Dieses Problem tritt bei der Verwendung von @font-face auf und Browser verhalten sich bei heruntergeladenen Schriftarten möglicherweise inkonsistent.

Um dieses Problem zu beheben, gibt es eine einfache Lösung, die Sie in Ihren CSS-Code implementieren können. Durch die Angabe von „local“ als erste Quelle versucht der Browser, die Schriftart vom lokalen System des Benutzers zu verwenden, sofern diese vorhanden ist. Ihr geänderter Code sollte wie folgt aussehen:

<code class="css">@font-face {
    font-family: 'DejaVu Serif';
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.eot');
    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>

Mit dieser Änderung prüft der Browser zunächst, ob „DejaVu Serif“ auf dem lokalen System des Benutzers vorhanden ist. Wenn die Schriftart gefunden wird, wird sie verwendet, ohne dass ein Download erforderlich ist. Nur wenn die lokale Schriftart nicht verfügbar ist, lädt der Browser die Remote-Schriftartendateien herunter.

Weitere Informationen finden Sie in der bereitgestellten Dokumentation: https://developer.mozilla.org/en-US/docs/ Web/CSS/@font-face/src

Das obige ist der detaillierte Inhalt vonWie kann ich die Verwendung lokaler Schriftarten mit @font-face in CSS priorisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!