Dienstprogramm zum Bestimmen der auf einer Site verwendeten Schriftart? [geschlossen]


9

Zum Beispiel: Ich mag die auf der Website verwendeten Schriftarten: NYTimes , also wäre etwas großartig , das alle von der Website verwendeten Schriftarten auflisten könnte !

Ich nicht möchte ein Bildverarbeitungs Dienstprogramm , das die Screenshots oder eine Website analysieren können , die werden Fragen über die Schrift stellen und verengen aus seiner Liste nach unten.

Etwas, das die Website einfach crawlen und ihre Schriftarten auflisten könnte ... Es wäre großartig, wenn es die Schriftarten in den Regionen überlagern könnte, aber das würde wohl zu weit gehen.


@Arjan warum :-(? Ich habe ausdrücklich erwähnt, wonach ich nicht suche, was das Thema der meisten Antworten dort war.
Lazer

Firefox hat dies heutzutage für eine einzelne Seite sehr einfach gemacht. siehe meine aktualisierte Antwort .
Arjan

Antworten:


20

Es gibt mehrere Möglichkeiten, dies zu erreichen. Ich mache das eigentlich ziemlich oft, weil ich sehr daran interessiert bin, wie CSS funktioniert, und ich liebe auch Typografie. Die zwei Möglichkeiten, wie ich das mache, sind:

  • Verwenden eines "Inspektors" mit Ihrem Browser (das ist, wonach Sie suchen!) - Ich verwende Google Chrome (weil ich es liebe), das über ein integriertes Inspektor-Tool verfügt . Du solltest es wirklich versuchen. Sie gehen einfach zu einer Site, klicken mit der rechten Maustaste auf das Element, das Sie analysieren möchten, und klicken im Kontextmenü auf "Element überprüfen". Der Inspektor zeigt die dynamischen Eigenschaften des HTML und CSS , wenn Sie also ein Textelement zu untersuchen, würden Sie das sehen font-familyCSS - Eigenschaftim Inspektor (in der rechten Seitenleiste), der Ihnen die Schriftart anzeigt (Informationen zur Interpretation dieses CSS finden Sie unten). Sie können Firebug for Firefox verwenden, um etwas Ähnliches zu erreichen, aber ich glaube, dass das Google Chrome Inspector-Tool weit überlegen ist (ich bin ein Webentwickler - ich verwende es für alles!).
  • Sie können die Quelle der Seite auch manuell anzeigen und das CSS analysieren. So geht's:

    1. Wenn Sie auf der Seite sind, zeigen Sie die Quelle an. Wenn Sie sich im Internet Explorer befinden, gehen Sie zu Seite -> Quelle anzeigen oder Ansicht -> Quelle. Wenn Sie Firefox, Chrome oder einen anderen modernen Browser verwenden, drücken Sie Strg + U (oder Apple + U, je nach Betriebssystem).

    2. Suchen Sie im HTML-Code nach den Textinhalten, die Sie analysieren möchten. Sie sollten einige Tags finden, die den Text enthalten, und die Schriftarten können entweder fest im HTML-Code codiert sein (mithilfe eines <font>Tags oder im styleAttribut eines <p>oder eines <div>Gehäuses), oder sie können auf CSS verweisen (nach einem classoder idAttribut suchen) und schreiben Sie diese auf).

    3. Wenn es das letztere ist (es verweist auf CSS), gehen Sie zum Anfang des HTML-Codes und suchen Sie die <link>Tags auf <head>der Seite. Wenn der Link auf ein Stylesheet verweist, wird es angezeigt. Jetzt müssen Sie nur noch zu diesem CSS-Stylesheet gehen und nach den von Ihnen notierten Klassen- oder ID-Kennungen suchen. Irgendwo finden Sie ein entsprechendes font-familyObjekt (vergessen Sie nicht, Sie können Schriftarten auch global auf der Website festlegen, und dies wäre unter dem <body>Tag oder etwas anderem. Aus diesem Grund sollten Sie ein Inspektor-Tool verwenden, da diese Schwierigkeit behoben ist ).

So interpretieren Sie das font-familyCSS:

Die font-familyEigenschaft bestimmt, welche Schriftarten verwendet werden. In dieser Eigenschaft werden Schriftarten durch Kommas getrennt . Beim Rendern der Seite durchsucht ein Browser diese Liste und verwendet die erste Schriftart auf dem Computer . In vielen Fällen befindet sich am Ende dieser Eigenschaft auch eine Schriftartkategorie, die nur "nur für den Fall" ist, sodass die Standardschriftart für diese Kategorie verwendet wird, wenn keine anderen verfügbar sind.

Ein Beispiel: Nehmen wir an, dies ist ein CSS für ein <p>Gehäuse.

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

Hier versucht der Browser zunächst, Calibri zu verwenden, wenn die Schriftart verfügbar ist. Wenn nicht, wird Comic Sans MS oder Georgia oder nur die serifenlose Standardschrift verwendet, wenn die anderen nicht verfügbar sind.

So können Sie herausfinden, welche Schriftarten verwendet werden. Ich habe keine gut gebauten und hilfreichen Tools gefunden, die das CSS auf sehr schöne Weise visualisieren, aber ich denke, dass die Inspector-Option für Sie funktioniert (es ist nicht zu verwirrend!). Ich denke, dass dies der richtige Weg ist.

Beispiel für das Auffinden von NYTimes-Schriftarten mit einem Inspector-Tool:

Ich werde Ihnen zeigen, wie Sie mit Google Chrome die Schriftarten für den Haupttext eines NYTimes-Artikels finden .

  1. Gehen Sie zu einem Artikel auf NYTimes.com, klicken Sie mit der rechten Maustaste auf ein Textelement, für das Sie die Schriftarten suchen möchten, und klicken Sie auf Element überprüfen .

    Inspektor öffnen

  2. Schauen Sie sich die Seitenleiste rechts an. In der Dropdown-Liste Berechneter Stil sehen Sie die CSS-Eigenschaften für dieses Element. Wie Sie jedoch sehen können, gibt es hier derzeit keine Eigenschaft für die Schriftfamilie. Dies bedeutet, dass die Schriftarten global definiert sind, nicht nur für dieses bestimmte Element. Es gibt jedoch einen Weg, dies zu umgehen!

    Anzeigen der Elementeigenschaften

  3. Folgendes tun Sie: Aktivieren Sie das Optionsfeld neben "Geerbt anzeigen".

    Wählen Sie Show geerbt

  4. Viele andere globale Eigenschaften werden unter "Berechneter Stil" angezeigt.

    Viele globale Eigenschaften werden angezeigt

  5. Scrollen Sie in der Liste nach unten zu "Schriftfamilie". Es sollte grau sein, was bedeutet, dass es sich um eine geerbte globale Eigenschaft handelt. Hier sehen Sie die verwendeten Schriftarten! Ta-da!

    Hier sind die Schriftarten!


Ich werde jetzt eine beispielhafte Erklärung für NYTimes hinzufügen.
Maxim Zaslavsky

danke ppl Ich liebe diesen Ort - www.superuser.com, jetzt noch mehr :)
Lazer

@ Maximz2005, für einige Auswahlen erhalte ich nicht das Dropdown-Menü "Berechneter Stil". Ich bekomme gerade eine leere Style-Dropdown-Liste. Warum das?
Lazer

1
Da der Inspektor wirklich der WebKit-Inspektor ist, gehe ich davon aus, dass eine spätere Beta auch eine neuere Version von WebKit enthalten wird. Eine neuere Version könnte natürlich neue Fehler anzeigen, aber ich frage mich, ob es wahrscheinlich ist, dass Sie gerade auf einen gestoßen sind. Gibt es eine Möglichkeit, die in Chrome verwendete WebKit-Version anzuzeigen?
Arjan

1
meins ist WebKit 532.0 @Maxim Z. Ich habe es im Chrome meines Freundes ausprobiert (Version 3.something). Es funktioniert dort perfekt. Endlich kann ich Schriftarten so erkennen, wie ich es wollte. Jetzt verstehe ich, wie cool die Funktion "Element inspizieren" wirklich ist.
Lazer

7

Es gibt zwei verschiedene Dinge:

  1. Welche Schriftart wird tatsächlich verwendet (vom Browser / Betriebssystem)?
  2. Welche Schriftart wurde angefordert (vom Ersteller der Website).

1. Welche (Fallback-) Schriftart wird tatsächlich verwendet?

Um sicher zu sein , die Schrift wird verwendet in einem bestimmten Browser auf Ihrem Computer / Betriebssystem, heute Firefox und Chrome haben integrierte Tools dafür. Wie der Firefox-Seiteninspektor hat auch eine Schriftartenansicht :

Firefox-Schriftartenansicht

Weitere Informationen finden Sie unter Wie kann ich feststellen, welche Schriftart ein Browser tatsächlich zum Rendern von Text verwendet? bei Stapelüberlauf. Das beinhaltet:

  • Text kann Unicode-Zeichen enthalten, die nicht in der im CSS definierten Schriftart enthalten sind, sodass möglicherweise mehrere Schriftarten in einem einzelnen Element verwendet werden.
  • Nicht jeder Browser auf der gleichen Maschine möglicherweise die gleiche Schriftart verwenden Typ (wie Truetype, Apple - Advanced Technology, Microsoft Opentype, Opentype Postscript) und damit unterschiedliche Schriftarten verwenden könnten. Daher müssen Sie möglicherweise bestimmen, welche Schriftart in anderen Browsern verwendet wird.

2. Welche Schriftart wurde angefordert?

Um festzustellen, welche Schriftart (vom Ersteller der Website) angefordert wurde, helfen Tools wie der integrierte Firefox Page Inspector oder seine Firebug-Erweiterung bei der Überprüfung der CSS-Regeln. Solche Tools sagen Ihnen nicht, welche Schriftart tatsächlich verwendet wird , sondern zeigen an, welche Schriftart für eine bestimmte Region oder sogar für ein bestimmtes Wort im CSS-Stylesheet angefordert wird :

CSS in Firebug

Das obige zeigt Firebug. Wählen Sie zuerst "Berechneten Stil anzeigen" im Menü "Stil" auf der rechten Seite. Klicken Sie anschließend links auf die Pfeilschaltfläche. Und dann klicken Sie einfach auf den Text Ihres Interesses. Dadurch werden die CSS-Stylesheet-Informationen auf der rechten Seite aktualisiert. In den Funktionen erfahren Sie mehr über die CSS-Funktionen.

Einige Firebug Lite sind auch für andere Browser verfügbar, aber das habe ich nie verwendet.

Web Inspector in Safari und Developer Tools in Chrome bieten ähnliche Optionen. (Aktivieren Sie in Safari den Web Inspector über die Einstellungen: Menü "Entwicklung entwickeln" in der Menüleiste .) Internet Explorer verfügt über die F12-Tools .

Wie e-t172 bemerkt : Die Web Developer Toolbar für Firefox kann diese Informationen auch anzeigen . In CSS »Stilinformationen anzeigen werden jedoch keine" geerbten "(" kaskadierten ") Stile angezeigt, sondern nur Informationen, die für die Region spezifisch sind, auf die Sie klicken. Um eine Art Überlagerung zu erhalten und die Schriftinformationen tatsächlich anzuzeigen, können Sie stattdessen Informationen »Elementinformationen anzeigen verwenden. Das zeigt die Details, wenn Sie irgendwo auf die Seite klicken.


+1 Für eine viel detailliertere Antwort als meine.
BinaryMisfit

Wie haben Sie diese verblassten Screenshots erhalten? Sieht aus wie ein Mac, gibt es eine Chance, einen ähnlichen Effekt auf Vista oder XP zu erzielen?
Lazer

@Lazer, Skitch auf einem Mac (aber die Schatten sind Standard und erforderlich, da OS X sehr dünne Fensterränder hat, falls vorhanden). Ich weiß nicht, wie ich es unter Windows machen soll.
Arjan

4

Wenn Sie Firefox verwenden, gibt es das Font Finder Add-on . Es macht im Grunde das, was Maxim Z. in seiner Antwort beschrieben hat , aber automatisch, so dass es wirklich einfach zu bedienen ist.


Font Finder ist genau das, wonach ich gesucht habe. Wenn es nur eine ähnliche Erweiterung für Chrome gäbe.
Kangax

@ Kangax gibt es heutzutage; siehe
Arjan

Und @kangax, heutzutage haben Firefox und Chrome integrierte Tools, um die tatsächliche Schriftart zu bestimmen. Kein Raten mehr.
Arjan

4

Dies ist bei weitem die beste Lösung, die mir begegnet ist. Es handelt sich um ein Lesezeichen / eine Erweiterung, mit der Sie in 99% der Fälle sicher feststellen können , welche Schriftart verwendet wird, indem die Pixel des angezeigten Texts mit denen aller verfügbaren Schriftarten verglichen werden, einschließlich TypeKit- und Google Font API-Schriftarten.

WhatFont-Tool

Geben Sie hier die Bildbeschreibung ein

Hör zu.


Schön, sehr schön, aber ich glaube nicht, dass es tatsächlich Pixel vergleicht (heutzutage)? Wenn das CSS nur sagt font-family: sans-serif, wird auch darüber berichtet - aber das allein ist keine Schriftart. Bei der Verwendung font-family: someUnknownFontbekomme ich (default font)als Ergebnis, was dann eigentlich Times auf meinem Mac ist. (Getestet mit dem Lesezeichen unter Verwendung dieses JS-Bin ; Screenshot .) Nochmals: schön!
Arjan

@Arjun Ich habe es vor ein paar Monaten eingehend untersucht, also werde ich es erklären, so gut ich mich erinnern kann. Unter der Haube macht es zwei Dinge. Es wird verwendet window.getComputedStyle, um die berechnete Schriftfamilie abzurufen. Anschließend wird dieser Stapel wiederholt, wobei die Pixel jeder Schriftart mit den angezeigten Pixeln verglichen werden. Die erste Übereinstimmung wird im Popup kursiv angezeigt, der Rest wird normal angezeigt. Wenn es keine Übereinstimmung gibt, wird es angezeigt (default font). Der Grund, den Sie sehen, sans-serifist, dass es korrekt mit der sans-serifSchriftart übereinstimmt , derzeit jedoch nicht weiter erkannt wird.
Max

Firefox ist mein neuer bester Freund dafür; siehe meine aktualisierte Antwort :-)
Arjan

3

Ich kenne keine Software. Ich habe gerade Internet Explorer verwendet und festgestellt, dass die verwendete Schriftart lautet:

Schriftfamilie: Georgia, "Times New Roman", Times, Serif

Dies ist die Hauptschriftart. Wenn Sie das Stylesheet nach etwas mit Schriftfamilie durchsuchen, erhalten Sie den Rest.

Prozess:

  • Klicken Sie mit der rechten Maustaste auf die Startseite
  • Sucht nach der rel = Stylesheet-Zeile und der angehängten Stylesheet-URL
  • Kopieren und in den Browser einfügen und die CSS-Datei herunterladen.
  • Im Texteditor öffnen.

Wenn Sie in den Bildern nach der Schriftart suchen, die außerhalb des Bildes nicht definiert wird.

Ja, mir war sehr langweilig. Es ist doch Freitagnachmittag. Ich habe den Link nicht gepostet, da sie das Stylesheet regelmäßig aktualisieren.


Uhuh, Firebug in Firefox oder Web Inspector in Safari ...?
Arjan

1
Wie ich sagte. Ich war gelangweilt. Ändern Sie für Ihren Geschmack von Browser und Quelltext anzeigen. Es gibt andere Tools, aber es einfach zu halten ist nicht unbedingt der falsche Ansatz.
BinaryMisfit

Gut für die Tatsache allein, dass es dem Benutzer etwas anderes beibringt, als sich immer auf Firefox zu verlassen.
zufällig

Laut Wikipedia sind beide georgiaund times new romanSchriften. Was bedeutet das Ergebnis? Eine Kombination dieser beiden Schriften?
Lazer

1

Mit der Firefox-Erweiterung von Web Developer können Sie alle Stile anzeigen, die von einem bestimmten Teil einer Webseite verwendet werden. Verwenden Sie das CSS-Menü Stilinformationen anzeigen. Klicken Sie dann auf den Text, den Sie analysieren möchten, und suchen Sie in den Ergebnissen nach der Eigenschaft "Schriftfamilie".


Informationen »Elementinformationen anzeigen funktioniert besser (es werden auch geerbte Stile angezeigt, und Sie müssen nicht selbst suchen).
Arjan

1

Im Gegensatz zu dem, was viele Leute gesagt haben, ist es NICHT immer nur eine Frage der Anzeige der Quelle usw. - hängt davon ab, ob sich das CSS im Dokument oder in einer externen CSS-Datei befindet. Wenn es extern ist, können Sie nicht einfach die Quelle anzeigen und das Tag der Schriftfamilie finden, da es nicht tatsächlich in der Datei vorhanden ist.

Das Poster zur Verwendung von Google Chrome hat tatsächlich einen sehr guten Tipp gegeben - ich habe hier etwas gelernt und wollte einen zusätzlichen Tipp hinzufügen. In den Entwicklertools, die in Chrome angezeigt werden, müssen Sie möglicherweise auf "Berechneter Stil" klicken und dann auf das Kontrollkästchen "Geerbt anzeigen" klicken und dann nach unten scrollen, bevor Sie es finden. Dies ist ein extremes Beispiel, aber wo es angezeigt wird, hängt davon ab wie die Seite strukturiert wurde.



-1

Wenn dies kein Inline-CSS ist, öffnen Sie einfach die Seite in der Quellansicht. Kopieren Sie die CSS-Adresse wie "/themes/01.css" und fügen Sie sie in die Browser-URL ein. Kopieren Sie die Rückgabe in den Texteditor oder CSS-Editor. Verwenden Sie find, um Schriftarten oder Schriftfamilien zu erstellen. Die aufgelistete Schriftfamilie, mit der die Seitenschrift für Größe und andere Attribute wie Fett, Kursiv usw. angezeigt wird.

Danke doronto

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.