Schriftart einer Website erkennen: deklarierter Font-Stack
SuperchargeInspect erkennt die Schriftart von Website-Text. Es zeigt den deklarierten font-family-Stack, Schriftgröße, Schriftstärke und Zeilenhöhe an und kopiert sie mit einem Klick.
Aktualisiert am
Ag
- Ink
- Amber
- Paper
Du siehst eine Schrift auf einer Website und willst ihren Namen wissen – also suchst du nach einem Tool, das die Schriftart einer Website erkennt. Zeig auf den Text, und der Bereich „Typografie“ zeigt die Schriftfamilie, die die Seite deklariert, mit Größe, Schriftstärke und Zeilenhöhe. Das ist der deklarierte Font-Stack, keine Prüfung, welche Schrift der Browser tatsächlich dargestellt hat. SuperchargeInspect liest den Live-Text auf der Seite, sodass du die Styles in einem Durchgang sehen und kopieren kannst.
Was ein Schriftart-Finder für Websites anzeigt
Wenn du Schrift-Styles auf einer Seite untersuchst, liefert dir der Bereich „Typografie“ alles auf einmal. Zeig auf beliebigen Text, und er öffnet sich mit der Schriftfamilie. Als Label wird die erste Familie der Liste angezeigt. Klick auf dieses Label, um font-family zu kopieren – der vollständige deklarierte Font-Stack landet in deiner Zwischenablage.
Der Wert „Größe“ zeigt die Schriftgröße mit der Zeilenhöhe nach einem Schrägstrich, etwa 16 / 24, und ein Klick kopiert beide zusammen als 16px / 24px. Die Schriftstärke ist ein eigener Wert, und „Laufweite“ zeigt den Buchstabenabstand.
Der Bereich zeigt außerdem als visuelle Vorschau ein Schriftmuster in der eigenen Schrift des Elements. Es ist eine Vorschau, wie die Schrift aussieht, keine Prüfung, welche Schrift der Browser verwendet hat. Du liest die Werte ab und klickst dann auf die, die du brauchst.
Deklarierter Stack, nicht die dargestellte Schrift
Ein Font-Stack ist eine Liste von Schriftfamilien, die die Seite der Reihe nach anfordert. Die erste Familie wird zuerst versucht. Ist sie nicht verfügbar, geht der Browser die Liste weiter nach unten. Genau diese Liste enthält ein font-family-Wert.
SuperchargeInspect zeigt dir diese Liste. Es prüft nicht, welche Familie der Browser letztlich verwendet hat. Wenn also die erste Familie nicht geladen werden konnte und der Browser auf eine andere zurückgegriffen hat, zeigt das Label trotzdem die erste Familie. Ein Schriftart-Finder für Websites zeigt dir den deklarierten Wert, nicht das dargestellte Ergebnis.
Es liest nur Live-Text auf der Seite. Schriften aus Bildern liest es nicht.
Schriftart kopieren
Du kannst die Schrift auf verschiedene Arten übernehmen. Das Label „Familie“ zeigt die erste Familie, beim Kopieren erhältst du die ganze Liste.
| Wo | Was du bekommst |
|---|---|
| Label „Familie“ unter „Typografie“ | Die erste Familie im Stack |
| Klick auf „Familie“ | Der vollständige deklarierte Font-Stack |
| „Copy text only“ oder „Copy reference“ | Der vollständige Stack, gekennzeichnet als Deklaration, nicht als geprüfte, tatsächlich dargestellte Schrift |
| Fußzeile des Referenz-PNG | Die erste Schriftfamilie |
Der vollständige Stack ist der Wert, den du tatsächlich verwendest. Füge ihn als font-family in dein eigenes CSS ein, und der Browser löst die Schriftfamilien in derselben Reihenfolge auf, in der die Seite sie aufgeführt hat.
Tastatursteuerung
Drücke Alt+Shift+E, um zu starten. Mit den Pfeiltasten wechselst du zwischen Elementen. Halte Ctrl gedrückt und drücke Pfeil nach oben oder unten, um zum übergeordneten Element oder zu einem untergeordneten Element zu springen. Unter macOS ist das Option statt Ctrl. Drücke Enter, um das aktuelle Element zu fixieren, und Esc, um zur Auswahl zurückzukehren oder das Panel zu schließen. Der Sprung zum übergeordneten oder untergeordneten Element hilft, wenn der Text in einem kleinen verschachtelten Element steckt, das sich mit der Maus nur schwer treffen lässt.
Datenschutz
SuperchargeInspect stellt keine Netzwerkverbindungen her und benötigt kein Konto. Der Stack verlässt dein Gerät nur, wenn du ihn selbst irgendwo einfügst.
Sieh dir mit dem CSS-Viewer auch Farben und Abstände an.
Häufig gestellte Fragen
Welche Schriftart verwendet diese Website?
Kann es eine Schriftart aus einem Bild oder Screenshot erkennen?
Was wird kopiert, wenn ich auf die Schriftfamilie klicke?
Zeigt es Schriftgröße, Schriftstärke und Zeilenhöhe an?
Werden Seitendaten irgendwohin gesendet?
Ähnliche Funktionen
Zeig deinem KI-Coding-Tool genau das Element, das geändert werden soll
Zeig auf das Element, schreib eine Notiz dazu und kopiere eine Referenz mit annotiertem Screenshot und beobachteten Styles – dann füge sie in das KI-Coding-Tool ein, das du bereits nutzt.
CSS-Viewer für jedes Element: CSS-Werte ansehen und kopieren
Ein CSS-Viewer, mit dem du das CSS jedes Elements auf einer Website ansehen kannst. Lies Schrift, Farben, Abstände und Box-Modell ab und kopiere CSS-Werte in deine Zwischenablage.
Website-Farben untersuchen: den Hex-Code jedes Elements finden
Prüfe die Farben jeder Website direkt auf der Live-Seite. Zeig auf das Element, und im Bereich „Farben“ siehst du Text-, Hintergrund- und Rahmenfarben. Ein Klick kopiert den Hex-Code.