Identifizieren Sie Schriftarten in Chrome, Edge und Firefox mit den Entwicklertools

Eine typische Webseite besteht im Allgemeinen aus mehreren verschiedenen Elementen, von denen die meisten in verschiedenen Farben kodiert und in verschiedenen Schriftarten und Stilen geschrieben sind. Manchmal stoßen wir auf Webseiten, die so schön gestaltet sind, dass wir uns tief in ihre Eigenschaften vertiefen wollen; ein sehr elegantes Thema oder vielleicht eine schöne, professionelle Schriftart.

Menschen, die sich mit Schriftarten auskennen und von ihnen fasziniert sind, verwenden häufig kostenlose Online-Tools(free online font identifier tools) zur Erkennung von Schriftarten, um Schriftarten im Internet zu entdecken. Bei diesen Online-Tools müssen Sie eine URL eingeben oder ein Bild mit der angezeigten Schriftart hochladen, das dann überprüft wird. Falls Sie sich nicht die Mühe machen möchten, die Verwendung eines neuen Tools zu lernen, ist dieser Beitrag für Sie. Heute werden wir erörtern, wie Benutzer erkennen können, welche Schriftart eine bestimmte Webseite verwendet, ohne eine Browsererweiterung, eine Anwendung oder irgendwelche Online-Tools zu verwenden.

Das Verfahren, das wir in diesem Artikel besprechen werden, dreht sich um eine Einstellung, die die meisten Webbrowser anbieten, nämlich „ Entwicklertools(Developer Tools) “, oder um genau zu sein, eine Option namens „ Inspect Element“ . Hier besprechen wir, wie Schriftarten in zwei Browsern identifiziert werden können – Chrome , Edge und Firefox .

Identifizieren Sie(Identify) Schriftarten auf einer Webseite mit Inspect Element in Firefox

Besuchen Sie die Webseite der Schriftart, die Sie identifizieren möchten, und klicken Sie mit der rechten Maustaste auf den Text, der in der Schriftart geschrieben ist, an der Sie interessiert sind.

Klicken Sie in der Liste der angezeigten Optionen (Kontextmenü) auf Element untersuchen(Inspect Element) . Dies(Doing) würde die Entwicklertools(Developer Tools) unten auf der Seite öffnen.

In der unteren rechten Ecke des Abschnitts Entwicklungstools(Development Tools) finden Sie eine Unterüberschrift namens Fonts , klicken Sie darauf.

Es zeigt Ihnen dann die Eigenschaften der Schriftart an, die Sie untersuchen möchten, wie Größe, Zeilenhöhe, Gewicht usw., und auch, ob die Schriftart kursiv ist oder nicht, obwohl dies immer offensichtlich ist.

Wenn Sie mehr über die verwendete Schriftart erfahren möchten, hat Firefox auch damit zu tun. Wenn Sie im Abschnitt „Schriftarten“ nach unten scrollen und auf „Alle Schriftarten auf der Seite“ klicken, wird die Registerkarte „Schriftarten“ erweitert und Ihnen werden alle Schriftarten angezeigt, die auf der Webseite, die Sie gerade besuchen, verwendet werden, und auch, wo sie sich befinden werden benutzt. Nicht nur das, Sie erhalten auch eine Vorschau, wie eine bestimmte Schriftart aussieht. Wenn Sie Ihre Maus über die Schriftarten in den Entwicklertools bewegen(Developer Tools) , werden die Abschnitte der Webseite hervorgehoben, die diese Schriftart verwenden.

Identifizieren Sie eine Schriftart mit den Entwicklertools(Developer Tools) in Chrome

Der Ablauf ähnelt dem oben beschriebenen. Befolgen Sie die ersten beiden Schritte wie bei Firefox , um die Entwicklertools(Developer Tools) auf der rechten Seite der Seite zu öffnen.

Identifizieren Sie Schriftarten in Firefox und Chrome mit den Entwicklertools

Klicken Sie auf die Unterüberschrift „Berechnet“.

Scrollen(Scroll) Sie ein wenig nach unten und Sie finden Informationen über die Schriftart, an der Sie interessiert sind (Schriftfamilie, Größe usw.).

Leider liefert Ihnen Chrome keine zusätzlichen Informationen wie Firefox .

Identifizieren Sie(Identify) mithilfe der Edge-Entwicklertools(Edge Developer Tools) , welche Schriftart verwendet wird(Font)

Welche Schriftkante

  1. Offener Rand
  2. Klicken Sie mit der rechten Maustaste und wählen Sie den Text aus
  3. Wählen Sie Prüfen aus
  4. Suchen Sie in den sich öffnenden Entwicklertools(Developer Tools) unter Berechnet(Computed)
  5. Sie sehen die Schriftartdetails.

Wenn Sie nicht glauben, dass Sie mit Browser - Entwicklertools(Developer Tools) nicht umgehen können und dass Online-Tools besser zu Ihnen passen würden, gibt es einige davon, die sehr gut funktionieren.

Lesen Sie weiter(Read next) : So finden Sie ähnliche kostenlose Alternativen zu kostenpflichtigen Schriftarten(find similar free alternatives to paid Fonts) .



Ruben Mayer

About the author

Ich bin ein leitender Softwareentwickler und Entwickler von Bildern und iPhone-Apps mit über 10 Jahren Erfahrung. Meine Fähigkeiten in Hardware und Software machen mich zur perfekten Besetzung für jedes Unternehmens- oder Verbraucher-Smartphone-Projekt. Ich habe ein tiefes Verständnis dafür, wie man qualitativ hochwertige Bilder erstellt, und kann mit allen verschiedenen Bildformaten arbeiten. Außerdem bin ich mit der Entwicklung von Firefox und iOS vertraut.


Related posts