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.
software-rec
website
fonts
Laser
quelle
quelle
Antworten:
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:
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:
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).
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 imstyleAttribut eines<p>oder eines<div>Gehäuses), oder sie können auf CSS verweisen (nach einemclassoderidAttribut suchen) und schreiben Sie diese auf).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 entsprechendesfont-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.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 .
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 .
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!
Folgendes tun Sie: Aktivieren Sie das Optionsfeld neben "Geerbt anzeigen".
Viele andere globale Eigenschaften werden unter "Berechneter Stil" angezeigt.
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!
quelle
Es gibt zwei verschiedene Dinge:
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 :
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:
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 :
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.
quelle
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.
quelle
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
Hör zu.
quelle
font-family: sans-serif, wird auch darüber berichtet - aber das allein ist keine Schriftart. Bei der Verwendungfont-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!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 dersans-serifSchriftart übereinstimmt , derzeit jedoch nicht weiter erkannt wird.Ich kenne keine Software. Ich habe gerade Internet Explorer verwendet und festgestellt, dass die verwendete Schriftart lautet:
Dies ist die Hauptschriftart. Wenn Sie das Stylesheet nach etwas mit Schriftfamilie durchsuchen, erhalten Sie den Rest.
Prozess:
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.
quelle
georgiaundtimes new romanSchriften. Was bedeutet das Ergebnis? Eine Kombination dieser beiden Schriften?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".
quelle
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.
quelle
Hier ist eine einfache, aber effiziente Lösung: Ein Lesezeichen, das Ihnen die Konfiguration zeigt, die auf ein Element (einschließlich der Schriftfamilie) angewendet wird.
Jesse's Bookmarklets Site hat eine gute für diesen Job :
computed styles.Los geht's: https://www.squarefree.com/bookmarklets/webdevel.html#computed_styles
quelle
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
quelle