Entwicklertools-Antworten: Welche Schriftart ist das?

Die Chrome-Entwicklertools können jetzt genau erkennen, welche Schriftart zum Rendern von Text verwendet wird.

Font Stacks sind eine lustige Sache, die eher ein Vorschlag ist als eine Nachfrage. Da die von Ihnen vorgeschlagene Familie möglicherweise nicht anwesend ist, lassen Sie den Browser jedes Nutzers den Fall-Fall bearbeiten, eine funktionierende Methode abrufen und diese nutzen.

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:

Schriftfamilie in den Entwicklertools

Unter Berechnete Stile sehen Sie nun eine Zusammenfassung der für dieses Element verwendeten Schriftarten. Beachten Sie dabei Folgendes:

  • Die Entwicklertools melden das tatsächliche Schriftbild, das in der Text-Rendering-Ebene von Chrome verwendet wird. So musst du nicht mehr raten, zu welcher Schriftart serif oder sans-serif sich tatsächlich aufgelöst hat.
  • Funktioniert meine Webschriftart? Manchmal lässt sich nur schwer feststellen, ob Sie die Webfont oder die Schriftart des Fallback-Systems sehen. Jetzt können Sie prüfen, ob die Webfont angewendet wird. Im Beispiel oben verwenden wir Lobster als Webfont für den Stil ::first-line.
  • Fall-through-Schriftarten in Ihrem Stack sind leicht zu erkennen. Oben wurde ein Tippfehler wie Merriweather festgestellt, sodass der Begriff "Lobster" nicht verwendet wurde.
  • Ist das Arial oder Helvetica? Frag einen Designer oder ... frag die Entwicklertools.
  • Funktioniert hervorragend mit Google Webfonts, Typekit, lokalen Schriftarten, @font-face-Schriftarten, Unicode-Glyphen und allen anderen interessanten Schriftartquellen.

Viel Spaß! Wenn du Feedback hast, hinterlasse bitte einen Kommentar.