LaunchFast Logo LaunchFast

Wann sollten Schriftarten vorab geladen werden?

Rishi Raj Jain

Kürzlich erhielt ich eine tolle Frage, wann ich Schriftarten mit dem Paket astro-font vorladen sollte.

Nun, die Antwort bezieht sich nicht speziell auf die Verwendung von Astro-Font, sondern ist eher ein technischer Kompromiss, über den Sie nachdenken sollten

In der folgenden Antwort wird davon ausgegangen, dass Sie eine Bibliothek (wie astro-font) verwenden, die die Fallback-Schriftart für Ihre spezifische Schriftart generiert

– Die Verwendung von Preload hat keinen Einfluss auf die Herkunft der Schriftart, egal ob lokal oder über CDN

  • Die Verwendung von Preload ist abhängig von der Art der Schriftarten, die auf Ihrer Website geladen werden, und deren Priorität:
    • Fall 1: Wenn ich beispielsweise eine Designer-Website mit Schriftarten ganz bestimmter Art habe und ich damit einverstanden bin, dass Benutzern eine Ersatzschriftart angezeigt wird (die entsprechend der Schriftart Ihrer Wahl generiert wurde), muss ich Preload nicht verwenden. Eine Ersatzschriftart ermöglicht dies ich, um Layoutverschiebungen loszuwerden
    • Fall 2: Wenn ich, sagen wir, eine Designer-Website mit Schriftarten ganz bestimmter Art habe, es mir aber NICHT recht ist, dass Benutzern eine Ersatzschriftart angezeigt wird, muss ich „Preload“ verwenden, um sicherzustellen, dass die Schriftarten im Netzwerkwasserfall eine höhere Priorität erhalten
    • Fall 3: Wenn ich keine Designer-Website habe, aber dennoch möchte, dass die Schriftart meiner Wahl für Benutzer sichtbar ist, sobald sie die Seite öffnen, muss ich Preload verwenden
    • Fall 4: Wenn ich keine Designer-Website habe und ich damit einverstanden bin, dass Benutzern eine Ersatzschriftart angezeigt wird, muss ich Preload nicht verwenden. Mit einer Ersatzschriftart kann ich Layoutverschiebungen beseitigen

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Learn More OpenAI Swarm-Nutzung in Python: Eine einfache Anleitung → Erstellen Sie einen Telegram-Bot im Next.js App Router: Eine Schritt-für-Schritt-Anleitung → Dynamisches Einfügen von Umgebungsvariablen in Cloudflare-Seiten →