Entwicklertools-Antworten: Welche Schriftart ist das?

Paul Irish

In den Chrome DevTools können Sie jetzt genau sehen, welche Schriftart zum Rendern von Text verwendet wird.

Schriftstapel sind eine lustige Sache, eher ein Vorschlag als eine Anforderung. Da die von Ihnen vorgeschlagene Familie möglicherweise nicht vorhanden ist, wird der Fall, in dem keine Übereinstimmung gefunden wird, vom Browser des jeweiligen Nutzers verarbeitet. Dabei wird etwas ausgewählt, das funktioniert.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Als Entwickler möchten Sie wissen, welche Schriftart tatsächlich verwendet wird. So funktionierts:

Unter Berechnete Stile sehen Sie jetzt eine Zusammenfassung der für dieses Element verwendeten Schriftarten. Hier sind einige Punkte zu beachten:

• In den Entwicklertools wird die tatsächliche Schriftart angezeigt, die von der Text-Rendering-Ebene von Chrome verwendet wird. Sie müssen nicht mehr raten, auf welche Schriftart serif oder sans-serif tatsächlich verweist.
• Funktioniert mein Webfont? Manchmal ist es schwer zu erkennen, ob die Webschrift oder die Fallback-Systemschrift angezeigt wird. Jetzt können Sie prüfen, ob das Web-Schriftbild angewendet wird. Im obigen Beispiel wird Lobster als Webfont für den Stil ::first-line heruntergeladen.
• Durchlaufende Schriftarten in Ihrem Stapel sind leicht zu erkennen. Oben hatten wir einen Tippfehler bei der Schreibweise von Merriweather. Daher wurde er nicht verwendet und es wurde zu Lobster gewechselt.
• Ist das Arial oder Helvetica? Fragen Sie einen Designer oder… fragen Sie die DevTools. ;)
• Funktioniert hervorragend mit Google Webfonts, Typekit, lokalen Schriftarten, @font-face-Schriftbildern, Unicode-Glyphen und allen anderen interessanten Schriftquellen.

Viel Spaß damit und hinterlasse gerne einen Kommentar, wenn du Feedback hast.