So wissen Sie, welche Schriftarten eine Website verwendet

Wenn Sie jemals eine besonders attraktive Website gesehen haben und sich gefragt haben, wie Sie sehen können, welche Schriftarten eine Website verwendet, ist die Antwort so einfach wie das Öffnen des Inspektors Ihres Browsers. Jedes Bit einer Website wird in Ihrem Browser interpretiert. Wenn Sie also wissen, wie Sie Ihren Browser-Inspektor richtig verwenden, können Sie nicht nur die Quellen, sondern auch die darin enthaltenen Bilder und die CSS-Eigenschaften aller anderen auf der Seite gefundenen Elemente herausfinden.

In diesem Beitrag erfahren Sie, wie Sie mit dem Chrome-Browserinspektor herausfinden, welche Schriftarten eine Website verwendet, und sogar, wie Sie mit ihnen spielen können. Aber zuerst erkläre ich, wie Sie darauf zugreifen und welche Funktionen Ihnen im Inspektor zur Verfügung stehen.

Greifen Sie auf Chrome Inspector zu

Wenn Sie den Chrome-Browser verwenden und eine Website inspizieren möchten, sollten Sie zunächst auf das Inspektorfenster zugreifen. Dazu gibt es mehrere Möglichkeiten:

• Durch Drücken der Taste F12, bzw
• Klicken Sie mit der rechten Maustaste auf ein bestimmtes Element und greifen Sie im sich öffnenden Menü auf die Option Inspect . Der Vorteil dieser Methode besteht darin, dass das betreffende Element direkt hervorgehoben wird, oder
• Durch Drücken der Tastenkombination Control + Shift + I (auf Windows) oder Cmd + Alt + I (auf Mac), bzw
• Durch Aufrufen des Chrome-Menüs (3 Punkte in der oberen rechten Leiste) » Weitere Tools » Entwicklertools.

Das Inspektorfenster kann in das Browserfenster selbst integriert oder in einem separaten Fenster angezeigt werden. Um auf diese Optionen zuzugreifen, können Sie dies tun, indem Sie auf das Konfigurationssymbol (3 Punkte) oben rechts im Inspektor klicken und den Wert der Eigenschaft «Dock Side» ändern.

Sie haben auch die Möglichkeit, den Seiteninhalt im Computeransichtsmodus oder so anzuzeigen, als ob Sie ihn auf einem mobilen Gerät anzeigen würden. Klicken Sie auf die zweite Schaltfläche auf der linken Seite der oberen Leiste des Inspektors und Sie werden sehen, wie der Inhalt automatisch angezeigt wird, als ob Sie von einem mobilen Gerät aus darauf zugreifen würden.

Sie können auch den Gerätetyp angeben, auf dem es angezeigt werden soll, die Größe oder ob Sie es im Hoch- oder Querformat anzeigen möchten.

Hauptregisterkarten des Inspektors

Wie Sie vielleicht gesehen haben, besteht der Inspektor aus verschiedenen Registerkarten.

Von jedem von ihnen haben Sie Zugriff auf verschiedene Funktionalitäten und Features:

• Elemente : Zeigt den HTML-Code der Seite sowie die angewendeten Stile an. Sie können sie auch schnell ändern und neue Regeln hinzufügen.
• Konsole : zeigt die verschiedenen Fehler- und Warnmeldungen, die auf der Seite auftreten (Bilder, die nicht geladen werden, Javascript-Fehler, …)
• Quellen : Zeigt den Ressourcenbaum für die Seite an. Sie können sehen, woher die verschiedenen Ressourcen stammen, und sie ändern.
• Netzwerk : zeigt die verschiedenen Anfragen von der Website, den Zugriff auf den Inhalt der Anfrage, die erhaltene Antwort, die Zeiten…
• Performance : zeigt die laufenden Prozesse und dient dazu, die Performance der Seite zu messen.
• Speicher : Zeigt den während des Ladens und Ausführens der Webseite verbrauchten Speicher an.
• Anwendung : Zeigt nützliche Informationen über die von einer Webanwendung verwendeten Ressourcen an.
• Sicherheit : Zeigt Informationen über die verschiedenen Websites an, auf die von der Seite aus zugegriffen wird, und ihre jeweiligen Zertifikate.
• Audits : Ermöglicht Ihnen, einen Auditbericht zu erstellen, um Fehler zu überprüfen.
• Es gibt Plugins, die dem Inspektor Registerkarten und Funktionen hinzufügen, sodass möglicherweise mehr Registerkarten vorhanden sind. Im vorherigen Bild wird gezeigt, dass wir das Redux DevTools- Plugin installiert haben.

Registerkarte „Elemente“.

Kommen wir nun zum eigentlichen Thema zurück: Wir wollten wissen, welche Schriftart beliebige Inhalte auf einer Webseite haben.

Wie ich bereits erwähnt habe, können Sie über die Registerkarte Elemente auf den HTML-Code und die Stile der verschiedenen Elemente auf der Seite zugreifen, auf der Sie sich befinden.

Wie Sie im Bild oben sehen können, haben Sie auf der linken Seite das Hauptfenster, das Ihnen den Quellcode zeigt. Und auf der rechten Seite haben Sie das Panel mit CSS-Stilregeln, die auf die verschiedenen Elemente der Seite angewendet werden.

Tatsächlich haben Sie im Stile-Bedienfeld drei Registerkarten:

• Stile : zeigt die angewendeten CSS-Regeln und Sie können neue ändern und hinzufügen.
• Berechnet : zeigt alle auf das Element angewendeten Regeln mit einem Panel, das die Ränder, den Rand und die Füllung des Elements darstellt.
• Ereignis-Listener : zeigt den Baum der Ereignisse, die auf der Seite gestartet wurden, und die davon betroffenen Steuerelemente.

Zeigen Sie die Details eines Artikels an

Wenn Sie also beispielsweise auf unsere Hauptseite von Nelio Software gehen, die Wörter Nelio Software aus dem Titel auswählen und mit der rechten Maustaste klicken, um zu überprüfen, um was es sich bei dem Element handelt, öffnet sich der Inspektor und zeigt Ihnen das obige Bild.

Im Inspektorbild können Sie sehen, dass das Hauptfenster mir mitteilt, dass der Titelstil „Nelio Software“ h1 ist.

In demselben Fenster haben Sie die Möglichkeit, mit der rechten Maustaste auf ein beliebiges Attribut oder einen Text zu klicken und es zu ändern oder zu löschen. Natürlich ändern alle Änderungen, die Sie hier vornehmen, nicht den ursprünglichen Inhalt, aber es ist genau ein sehr nützliches Werkzeug, wenn Sie Seiten entwerfen und sich ein Bild davon machen möchten, wie jede von Ihnen vorgenommene Änderung aussieht.

Siehe Schriftart

Jetzt wissen Sie, dass es sich um eine Überschrift handelt, aber was ist mit der Schriftart?

Nun, ganz einfach, auf der Registerkarte Berechnet des Inspektors finden Sie alle Eigenschaften des ausgewählten Elements. Scrollen Sie nach unten zum Attribut font-family und dort finden Sie genau die Schriftart, die die Überschrift unserer Website hat.

Und wenn Sie neugierig sind, wie dieses Element aussehen würde, wenn Sie die Schriftart ändern möchten, gehen Sie zur Registerkarte Styles , gehen Sie zum Attribut font-family und Sie können es direkt mit dem gewünschten Wert ändern.

Ihre Website wird automatisch mit der geänderten Schriftart angezeigt

Wie Sie sehen können, ist der Google Chrome-Inspektor ein sehr komfortables und benutzerfreundliches Tool zum Herumspielen und Ausprobieren des Designs, das Sie hinterlassen hätten, nachdem Sie Änderungen an einem Element vorgenommen hätten.

Was ist mit der Schriftart eines Bildes?

Wie Sie gesehen haben, können Sie mit dem Google Chrome-Inspektor die Eigenschaften aller Elemente auf Ihrer Seite anzeigen. Wenn Sie jedoch die Schriftart eines Bildes auf einer Website sehen möchten, können Sie dies nicht mit dem Inspektor sehen. Der Inspektor zeigt Ihnen die Eigenschaften des Bildes als solches, das in Ihre Seite eingefügt wurde, zeigt Ihnen jedoch nicht die Details des Inhalts dieses Bildes.

Dazu gibt es einige Tools wie Font Squirrel Matcherator oder Whatfontis.com, die Ihnen helfen können, die in einem Bild verwendete Schriftart zu identifizieren. Dazu müssen Sie in beiden Tools entweder das Bild herunterladen (bei whatfontis.com können Sie auch die URL des Bildes angeben) und dann den Teil des Bildes auswählen, der den zu identifizierenden Buchstaben enthält.

Beide Tools zeigen Ihnen eine ganze Reihe von Schriftarten an, die ungefähr mit dem ausgewählten Text übereinstimmen. Aber wenn Sie vermuten, dass dies keine exakte Übereinstimmung ist, können Sie ähnliche Schriftarten wie die vom Tool angezeigten googeln und Sie werden sehen, was Sie bekommen.

Beitragsbild von Gemma Evans auf Unsplash.