5 möglichkeiten, Schriftarten auf einer Webseite zu identifizieren

Veröffentlicht von Rob Hope in Landing Page Tutorials, auf 20 Kann 2018

Sie surfen also im Internet und stoßen auf die schlechteste Schriftkombination, können die Schriftart jedoch nicht identifizieren? Nun, in diesem Video (und der Liste unten) zeige ich Ihnen genau, wie Sie diese Schriftarten finden …

Fontanello (Chrome + Firefox)

Fontanello Chrome und Firefox Erweiterung, meiner Meinung nach, ist der schnellste Weg, um herauszufinden, welche Schriftart eine Webseite verwendet. Sie klicken einfach mit der rechten Maustaste auf den Text, finden Fontanello im Menü und pow gibt es die Schriftfamilie und einige zusätzliche Attribute.

WhatFont (Chrome und Safari)

Die WhatFont Chrome- und Safari-Erweiterung ist meine Lieblingsoption, wenn es um die Erkennung von Schriftarten geht. Um das Tool zu aktivieren, müssen Sie im Browsermenü auf das Symbol Welche Schriftart klicken. Jetzt können Sie mehrere Textteile auswählen, um eine bessere Visualisierung der Schriftart Breakdown vs Fontanello zu ermöglichen.

Visual Inspector (Chrome)

Die Visual Inspector Chrome-Erweiterung bietet etwas mehr Tiefe als die beiden oben genannten. Klicken Sie einfach auf das Visual Inspector-Symbol im Chrome-Menü, um das Tool zu aktivieren, und gehen Sie dann zum Abschnitt Typografie in der Dropdown-Liste. Sie erhalten nun die verwendeten Schriftfamilien mit einer zusätzlichen Aufschlüsselung der gesamten Typografie auf der Webseite.

Good old Code Inspection (Alle Browser)

Wenn Sie also vermeiden möchten, Dutzende von Browsererweiterungen zu installieren, erfahren Sie mehr über die verwendeten Schriftarten durch eine Good Old Code Inspection:

Wenn Sie Google Chrome verwenden, klicken Sie mit der rechten Maustaste auf den Mystery-Text und wählen Sie Inspect. DevTools öffnet sich, stellen Sie sicher, dass Sie sich auf der Registerkarte Stile befinden, und gehen Sie zu den Attributen der Schriftfamilie, um mehr über die Schriftarten zu erfahren.

Wenn Sie Firefox verwenden, klicken Sie mit der rechten Maustaste auf den Text und wählen Sie Element prüfen. Ihr Inspektor erscheint, gehen Sie jetzt auf die bequeme Registerkarte Schriftarten für die Informationen, die Sie benötigen.

Wenn Sie Safari verwenden, stellen Sie sicher, dass das Entwicklermenü sichtbar ist, indem Sie das Kontrollkästchen unten auf der Registerkarte Erweitert in den Safari-Einstellungen aktivieren. Klicken Sie nun mit der rechten Maustaste auf den Text und wählen Sie Element prüfen. Öffnen Sie die Seitenleiste Details, wenn sie geschlossen ist, und wählen Sie die Option Styles – Computed. Im Abschnitt Schriftfamilie werden die Schriftartinformationen innerhalb der Stilattribute angezeigt.

Uncover Renamed Fonts (advanced method)

Ein Hindernis, dem wir begegnen können, ist, wenn eine Schriftfamilie nicht klar benannt ist, natürlich die Werkzeuge und Methoden der Schriftinspektion abzuwerfen. Wir starten die Bergungsmission, indem wir die Schriftart tatsächlich herunterladen.

Es gibt mehrere Möglichkeiten, dies zu tun, aber ich beginne damit, den aktuellen Schriftnamen zu notieren. Öffnen Sie nun das Inspektor-Tool (ich verwende Google Chrome), gehen Sie zur Registerkarte Anwendung, scrollen Sie zum Abschnitt Frames und öffnen Sie Schriftarten. Wir müssen den Dateinamen mit dem zuvor angegebenen Schriftartnamen abgleichen. Öffnen Sie nun diese Schriftart in einem neuen Tab, um sie herunterzuladen. Schließlich ziehen wir diese Schriftartdatei in die awesome What Can My Font Do? website und bam, die Schriftart Info ist schön präsentiert.

Viel Liebe,
Rob
Twitter: @robhope
LinkedIn: @robhope
E-Mail:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.