Woher weiß ich, welche Schriftarten eine Website verwendet?

36

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

Yisela
quelle
1
Siehe meine Antwort auf Stack Overflow für integrierte Tools in Chrome und Firefox und eine Option zum Kopieren und Einfügen für Safari: stackoverflow.com/questions/884177/…
Arjan
Ohne 10 Wiederholungen, um zu antworten, mache ich es hier: Ab diesem Moment (2018.3) ist Fount nicht verfügbar und auf WhatFont kann im Firefox-Add-On-Store nicht zugegriffen werden. Zuletzt muss ich das DevTool von Chrome / IE / FF / Opera auf der Registerkarte "Stil" aufrufen, die Eigenschaft bearbeiten, um jede Schriftart zu löschen und zu sehen, welche Schriftart angewendet wird. Es ist sehr schade, dass alle DevTools nur den vollständigen Stapel der Schriften anzeigen und nicht den tatsächlich angewendeten . Sogar in FF ist das "am besten passende" nicht das am besten passende; die "am besten passenden" Pop-Up-Shows für jede Schriftart im Stapel ........ dumm, oder?
WesternGun
@WesternGun, was meinst du mit "all DevTools" ? Firefox und Chrome zeigen die tatsächliche Schriftart gut an. Siehe die Screenshots in der Antwort, die ich in meinem vorherigen Kommentar verlinkt habe.
Arjan
OK, ich habe den Screenshot @Arjan übersehen. Jetzt ist es offensichtlich.
WesternGun

Antworten:

44

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.

Bildbeschreibung hier eingeben


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.

Bildbeschreibung hier eingeben

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).

Yisela
quelle
1
Schöner Zug :-) Ein Gedanke: Wie kann man feststellen, welche Schriftart im Schriftfamilienstapel tatsächlich auf dem Bildschirm angezeigt wird? Normalerweise mache ich das durch Ausprobieren, indem ich von der ersten Schriftart lösche, bis sich das Erscheinungsbild ändert, aber ich bin mir sicher, dass es einen besseren Weg gibt. In WhatFont ist es das in Kursivschrift? (ps Willkommen zurück!)
user56reinstatemonica8
@ user568458 Danke :) Ich möchte auf jeden Fall Screenshots des Prozesses der Suche nach der Schriftart mit dem Inspektor hinzufügen. Ich habe es selbst nach Jahren des Gebrauchs schwer! Aber um ehrlich zu sein, ich habe eigentlich keine richtige Technik, ich mache auch Versuch und Irrtum. In WhatFont bedeutet Kursivschrift meines Erachtens, dass es sich nicht um eine Systemschrift handelt.
Yisela
@ Yisela aus Neugierde, warum zeigt der WhatFont-Screenshot eine rote Farbe (# ea4858) einer blauen Schrift? Ist es nur die Farbe, die Sie zuvor aufgenommen haben, oder ein Fehler? EDIT: Oh, ich sehe, es ist wahrscheinlich die Schwebefarbe, als Sie dieses Element ausgewählt haben, was nicht ideal, aber dennoch cool erscheint.
DasBeasto
@DasBeasto Ja, es ist die Schwebefarbe! i.imgur.com/5NLjaEV.png Ein guter Punkt, ein weiterer Sieg für die manuelle Überprüfung, da Sie damit verschiedene Interaktionszustände auswählen können.
Yisela
3
Auch wollte nur hinzufügen, Firefox (v35.0) hat ein gutes Element Inspector für Schriftarten. Sie können die Registerkarte "Schriftart" auswählen, auf der alle Details zu dem ausgewählten Element (Schriftfamilie, Stil, Dateityp) angezeigt werden, oder Sie können auf "Alle auf der Seite verwendeten Schriftarten anzeigen" klicken, um alle vom Server heruntergeladenen Schriftarten anzuzeigen. Dann können Sie die berechnete Registerkarte besuchen, die Ihnen auch Informationen zur Farbgröße usw. ohne zusätzliche Unordnung und Vererbung wie Chrome anzeigt.
DasBeasto
11

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 +.

Cai
quelle
Fount ist gut, wenn man bedenkt, dass es auch für den IE funktioniert, aber WhatFont schlägt sich besser, da es Ihnen die tatsächlich sichtbare Schriftart sowie die im HTML-Markup angegebene Schriftart anzeigt. Der Vergleich ist also schnell.
Moiz Tankiwala
1
Site down ... nicht verfügbar in 2018
WesternGun
@FaithReaper die Website (und das Skript) funktioniert immer noch perfekt für mich
Cai
1
Ich betrete die Site und sehe links nur einen grauen Block, ohne Anweisung oder nichts? Ich kann die Bilder nicht hochladen, aber es sieht komisch aus. fount.artequalswork.com/
WesternGun
@FaithReaper Die Website sollte folgendermaßen aussehen: i.stack.imgur.com/goShP.png (Sie laden jedoch keine Bilder hoch , es ist nur ein Lesezeichen, mit dem Sie die auf Live-Websites verwendeten Schriftarten überprüfen)
Cai
1

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.

CSS Viewer Chrome Erweiterung

user86140
quelle
-2

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.

Khushbu Solanki
quelle
3
Hallo Khushbu, willkommen auf der GDSE. Können Sie uns sagen, was und wo wir "FontFinder" können? Wenn Sie mit dem Produkt verbunden sind, müssen Sie Ihre Zugehörigkeit in Ihren Antworten offenlegen. Siehe So werden Sie kein Spammer .
Cai
2
Der Text in der obigen Antwort stammt aus chrome.google.com/webstore/detail/font-finder/… und / oder add0n.com/font-finder.html
ChrisW