Woher weiß ich, welche Schriftarten eine Website verwendet?

Wie kann ich herausfinden, welche Schriftarten auf einer Website verwendet werden? Gibt es Tools oder Browsererweiterungen, die die Arbeit erleichtern können?

Option 1: Verwenden Sie eine Browser-Erweiterung (Easy)

Erweiterungen wie WhatFont (verfügbar für Chrome, Firefox und Safari) erleichtern die Erkennung von Schriftfamilien für jeden Text auf einer Webseite. Sie müssen nur die Erweiterung installieren, sie auf einer Site aktivieren und auf das Element klicken, das Sie überprüfen möchten. Die Ergebnisse werden in einer schwebenden Box angezeigt, immer im Kontext Ihrer Wahl.

Option 2: Manuelles Überprüfen des CSS mit Browser-Inspektoren (Erweitert)

In den meisten Webbrowsern können Sie die Schriftarten mit right-click→ „Inspect“ oder „Inspect Element“ leicht finden . Dies kann auch durch Drücken von erfolgen F12. Daraufhin wird eine Liste der an die Website angehängten Stile angezeigt, die Sie durchsuchen können, um die in jedem HTML-Element verwendeten Schriftarten zu finden.

Die Verwendung des Inspektors ist nicht so einfach wie die Verwendung einer Erweiterung, bietet jedoch mehrere Vorteile. Einige CSS-Kenntnisse sind erforderlich, da Sie normalerweise mehrere Stile durchgehen müssen, um den angewendeten zu finden. In der Regel werden durchgestrichene Stile überschrieben. Suchen Sie daher immer nach den Stilen, die zuletzt angewendet wurden.

Alle Stile der Seite werden auf der Registerkarte " Stil" aufgelistet. Wenn Sie stattdessen die Registerkarte " Berechnet" verwenden, finden Sie die Eigenschaften, die aktiv auf das ausgewählte Element angewendet werden, einschließlich natürlich der Schriftfamilie.

Eine weitere Möglichkeit, schnell zu überprüfen, welche Schriftarten global verwendet werden (aber NICHT wie oder wo), ist 'Anwendung → Rahmen → Schriftarten' . Dort finden Sie eine Liste aller referenzierten (Nicht-System-) Schriften.

Diese zweite Methode ist langsamer, aber wenn Sie den Inspector verwenden, erhalten Sie einen guten Einblick in die Art und Weise, wie die gesamte Seite aufgebaut ist. Viele Designer und Entwickler verwenden es auch als Tool zum Testen von Änderungen, bevor sie tatsächlich in das Stylesheet geschrieben werden (da das Ändern einer CSS-Zeile im Inspektor eine Echtzeitvorschau im Browser auslöst).

Das Inspect-Element des Browsers ist nicht perfekt

Mit den Entwicklertools Ihres Browsers können Sie feststellen, welche Schriftarten im CSS einer Website deklariert sind. Hier wird jedoch nicht angezeigt, welche Schriftart tatsächlich gerendert wird. Es wird nur der angewendete Schriftstapel angezeigt. Die tatsächlich gerenderte Schriftart kann je nach installierten Schriftarten usw. variieren.

Ein weiteres nützliches Werkzeug ist Fount .

Fount teilt Ihnen mit, welche Webschrift in Ihrem Schriftstapel Sie tatsächlich sehen - nicht nur, was gesehen werden soll. Außerdem werden Schriftgröße, -stärke und -stil angezeigt.

Die Verwendung von Fount ist so einfach wie das Hinzufügen eines Lesezeichens. Keine Notwendigkeit, eine App oder Erweiterungen zu installieren.

Nach dem Hinzufügen des Lesezeichens:

1. Gehen Sie zu einer beliebigen Site und klicken Sie auf das Fount-Lesezeichen.
2. Klicken Sie auf einen Typ, den Sie identifizieren möchten. Wiederholen.
3. Um Fount auszuschalten, klicken Sie erneut auf das Lesezeichen.

Fount funktioniert in Safari, Chrome, Firefox und IE8 +.

Ich liebe die Chrome-Browser-Erweiterung CSSViewer . Klicken Sie einfach darauf und bewegen Sie den Mauszeiger über die Schriftart, die Sie identifizieren möchten. Daraufhin wird die Schriftfamilie angezeigt.

FontFinder wurde für Designer, Entwickler und Typografen entwickelt. Es ermöglicht einem Benutzer, die Schriftartinformationen eines Elements auf einer Seite zu analysieren, Teile dieser Informationen in die Zwischenablage zu kopieren und Inline-Ersetzungen durchzuführen, um neue Layouts zu testen.

Dieses Add-On eignet sich am besten zum Auffinden von Schriftarten und anderen CSS-Elementen wie Schriftgröße, Schriftgröße und vielen anderen Formularwebseiten.