Wie kann ich feststellen, welche Schriftart ein Browser tatsächlich zum Rendern von Text verwendet?

Mein CSS gibt " font-family: Helvetica, Arial, sans-serif;" für die gesamte Seite an. Es sieht so aus, als würde Verdana stattdessen an einigen Stellen verwendet. Ich möchte dies überprüfen können.

Ich habe versucht, von meinem Browser in Word zu kopieren und einzufügen, aber die Schriftart bleibt nicht erhalten.

Gibt es eine Möglichkeit festzustellen, welche Schriftart tatsächlich für einen Textabschnitt verwendet wird?

Firebug gibt mir die Liste der Schriftarten wie oben [1], aber ich sehe keine Möglichkeit, festzustellen, welche der Schriftarten verwendet wird.

1. Es stellte sich heraus, dass die falsche Liste verwendet wurde, die mein ursprüngliches Verdana-Problem löste. Aber ich bin immer noch neugierig, ob es eine Möglichkeit gibt, die tatsächliche Rendering-Schriftart zu identifizieren.

Per Wilfred Hughes' Antwort , unterstützt Firefox nun diese nativ. Dieser Artikel enthält weitere Details .

Dieses Antwort-Original bezog sich auf das Plugin "Font Finder", aber nur, weil es von vor 4 Jahren war. Die Tatsache, dass alte Antworten so bleiben und die Community sie nicht aktualisieren kann, ist einer der wenigen verbleibenden Fehler des Stapelüberlaufs.

Heutzutage haben Chrome und Firefox integrierte Tools dafür, aber in Safari müssen Sie Text kopieren und untersuchen.

Wählen Sie zunächst einen Text aus. In Firefox verfügt der Seiteninspektor über eine Schriftartenansicht :

Hier erfahren Sie auch, ob Schriftarten heruntergeladen wurden und welcher Stil verwendet wird, z. B. Regular, ExtraLight, Italic, BoldItalic und alle.

Gehen Sie für Chrome in die "Elemente" von DevTools, wechseln Sie zur Registerkarte "Berechnet" und scrollen Sie bis zum Abschnitt "Gerenderte Schriftarten". Im Gegensatz zu Firefox wird hier nur der Name der Basisschrift angezeigt, nicht jedoch ein bestimmter Stil:

Die obigen Screenshots zeigen, dass für Unicode-Text möglicherweise mehrere Schriftarten angezeigt werden. Chrome sagt Ihnen, dass 6 Glyphen ("Pekka" und das Leerzeichen) "Arial" verwenden und eine ("웃") "Apple SD Gothic Neo" verwendet:

Arial - Lokale Datei (6 Glyphen)
Apple SD Gothic Neo - Lokale Datei (1 Glyphe)

Das eigentliche CSS definiert:

font-family: Arial,"Helvetica Neue",Helvetica,sans-serif

Diese Schriftarten enthalten jedoch häufig nicht viele Sonderzeichen. Da die Schriftinformationen pro HTML-Element funktionieren, wobei Unicode-Text in einem Element tatsächlich mehrere Schriftarten verwenden kann, werden auch mehrere Schriftarten angezeigt. Wenn Sie Zweifel haben, doppelklicken Sie einfach auf den Text im HTML-Bereich und entfernen Sie den Text, an dem Sie nicht interessiert sind. Wenn Sie das umgebende Element erneut auswählen, wird nur eine Option angezeigt. In diesem Fall wird angezeigt, dass beide Browser "Apple SD Gothic Neo Regular" für das Zeichen "웃" verwendet haben.

Leider können unterschiedliche Browser (und sogar unterschiedliche Versionen eines einzelnen Browsers) auf demselben Computer aufgrund der von einem Browser unterstützten / bevorzugten Schriftarten unterschiedliche Schriftarten verwenden. Auf einem Mac beispielsweise bevorzugt Safari möglicherweise die Apple Advanced Technology, während Firefox Microsoft OpenType unterstützt (was nach der Installation von Microsoft Office auf einem Mac zu Problemen für Arabisch führen kann ). Oder für das "웃" -Zeichen in den obigen Screenshots bevorzugen Chrome und Firefox auf meinem Mac heutzutage "Apple SD Gothic Neo" (OpenType PostScript), aber ältere Versionen von Firefox verwendeten stattdessen "AppleGothic Regular" (TrueType-Schriftart). .

Für Browser, die keine ähnliche Schriftartenansicht haben, kopieren Sie einfach ein Fragment des Textes und fügen Sie es in ein Textverarbeitungsprogramm oder einen Rich-Text-Editor ein, wählen Sie einen bestimmten Text aus und sehen Sie, welcher Name in einer Dropdown-Liste für Schriftarten angezeigt wird. Auf meinem Mac funktioniert dies nicht beim Einfügen aus Firefox (wobei für "웃" Firefoxs "Apple SD Gothic Neo" beim Einfügen in "AppleMyungjo" konvertiert wird), funktioniert aber gut für Safari und Chrome:

Firefox 22+ zeigt Ihnen, welche Schriftart derzeit ohne Erweiterungen verwendet wird.

WhatFont ist eine Chrome-Erweiterung, die Ihnen genau sagt, welche Schriftart im Schriftstapel geladen wird.

Für aktuelle Versionen von Firefox (seit Version 7) gibt es ein Add-On namens "fontinfo", das die tatsächlich verwendete Schriftart (anstelle der Angaben in der Eigenschaft der CSS-Schriftfamilie) meldet und Fälle berücksichtigt, auf die der Browser zurückgreift eine andere Schriftart, da die angeforderte Schriftfamilie nicht verfügbar war oder die im Text verwendeten Zeichen nicht unterstützte.

Sie können versuchen, diesen bestimmten Abschnitt mit Firebug for Firefox zu überprüfen. Es sollte Ihnen alle genauen Eigenschaften geben.

Das von Jeremy erwähnte "FontFinder" -Plugin scheint hier nicht zu funktionieren und gibt die erste Schriftart der CSS-Liste an, unabhängig von der tatsächlich gerenderten Schriftart (Firefox 4.0rc1 unter Linux). Das folgende Plugin gibt Ihnen jedoch anscheinend die "richtige" Schriftart.

Kontextschriftart

Basierend auf dem Textmessungsansatz und dem Skript von Lalit Patel habe ich Lesezeichen erstellt , die die Schriftart erraten können, die für den aktuell ausgewählten Text verwendet wird (oder die body, wenn nichts ausgewählt ist). Es scheint sehr gut für mich zu funktionieren, um herauszufinden, welche Schriftart in einem Stapel verwendet wird! (Es kann Ihnen jedoch nicht sagen, was sans-seriftatsächlich zugeordnet ist.)

Schnapp sie dir hier: https://alanhogan.com/bookmarklets#font-stack-full

Die Quelle ist auf GitHub .

Siehe auch: Dieser CodePen , der meist denselben Code verwendet. Probieren Sie es aus, indem Sie verschiedene Absätze auswählen und das Update der Tabelle / Vermutung ansehen!