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

175

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.

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.

css browser fonts

— lavaturtle
quelle

stackoverflow.com/questions/845/detecting-font-in-javascript

— ajm

FontFinder und WhatFont, die in den folgenden Antworten beschrieben werden, sind immer noch sehr grobe Methoden, um verwendete Schriftarten zu erkennen. Beide haben fälschlicherweise "Quanttrocentro Sans" (die primäre Schriftart) angegeben, wenn ich ein Aghani- ؋Symbol auswähle, das in dieser Schriftart nicht verfügbar ist.

— Frage Überlauf

@QuestionOverflow, heutzutage verfügen Firefox und Chrome über integrierte Tools zum Bestimmen der Schriftart. Sie wird die Schriftart für jede Glyphe zeigen, daher wird Ihnen zeigen , was Schriftart für diese ؋ auch verwendet wurde.

— Arjan

@Arjan: Ist das auch 2020 noch so?

— verschlang Elysium

@devouredelysium, hast du meine Antwort gesehen ? Wählen Sie einfach eine einzelne Glyphe aus, um zu sehen, welche Schriftart verwendet wird.

— Arjan

50

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.

— Jeremy Kauffman
quelle

7

Kein Grund, dies jetzt zu verwenden, da Firefox Tools> Web Developer> Inspector> Fonts es Ihnen sagen (Antwort von Wilfred Hughes)

— Skifahrerseite

1

Leider hat Firefox 47 nicht mehr die Registerkarte Schriftarten, auf die in diesem Blog verwiesen wird, auf den Sie verlinkt haben: Dieser Artikel enthält weitere Details

— Zabba

3

"Ab Firefox 47 ist die Schriftartenansicht standardmäßig deaktiviert. Wir arbeiten an einem Ersatz mit umfassenderen Funktionen. Wenn Sie die Schriftartenansicht anzeigen möchten, besuchen Sie vorerst about: config und suchen Sie die bevorzugten devtools. fontinspector.enabled und setzen Sie es auf true. " Siehe developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/… .

— Daniel Le

1

Offenbar Einstellung devtools.fontinspector.enabledwurde in Firefox benötigt nur 47: „In Firefox 47 nur wird die Schriftart Ansicht standardmäßig deaktiviert , wenn Sie die Schriftarten sehen in Firefox 47, Besuch zu sehen. about:config, Finden die Präferenz devtools.fontinspector.enabled, und setzen Sie sich auf trueVor und nach. In Firefox 47 ist die Ansicht "Schriftarten" standardmäßig aktiviert. " , @DanielLe.

— Arjan

1

@ DanielLe, natürlich habe ich verstanden, dass es zum Zeitpunkt des Kopierens des Textes korrekt war :-)

— Arjan

151

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:

— Arjan
quelle

1

Wissen Sie, ob Safari ein Plugin oder etwas dafür hat?

— Andry

4

Stellen Sie in Chrome 47 sicher, dass Sie zum Ende des Abschnitts "Berechnet" scrollen. Wenn Sie das font-familyAttribut so erweitern, wie es angezeigt wird (in alphabetischer Reihenfolge), wird nicht angezeigt, welche Schriftart geladen wird. Diese Informationen werden unten angezeigt.

— Merchako

1

@ Merchako, Was passiert, wenn Ihre berechnete Schrift eine generische Schrift wie "Serif" und "Sans-Serif" ist? Wie erhält man dann die eigentliche Schriftart?

— Pacerier

2

@Pacerier, scrollen Sie in Chrome auf der Registerkarte " Berechnet" ganz nach unten . In Firefox finden Sie die separate Registerkarte.

— Arjan

1

@TMG, ich könnte mir vorstellen, dass Web-Schriftarten möglicherweise keinen Alias benötigen, aber direkt auf eine URL verweisen können. Ist dies eine öffentliche Website, die wir uns ansehen können? Wenn nicht, was zeigt Firefox?

— Arjan

32

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

— Wilfred Hughes
quelle

1

Dies sollte jetzt wirklich die endgültige Antwort sein. Sie müssen keine Erweiterung installieren.

— Dan Eastwell

aber einen browser benutzt wohl jemand nicht. Eine Erweiterung ist in diesem Sinne viel leichter.

— 10.

30

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

— user1100745
quelle

6

Für mich steht, welche Schriftart deklariert ist, aber nicht welche Schriftart tatsächlich verwendet wird.

— Panzi

3

Gemäß diesem Artikel ( updates.html5rocks.com/2013/09/… ) kann Dev Tools Ihnen jetzt mitteilen, welche Schriftart tatsächlich gerendert wird.

— yorch

WhatFont Versuche , die Schrift dargestellt zu erkennen scheint aber nicht so erfolgreich github.com/chengyin/WhatFont-Bookmarklet/issues/13

— Chris Marisic

7

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.

— Jonathan
quelle

Inzwischen ist dies die beste Antwort

— Ingo Kegel

1

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

— Jeroen
quelle

Das gibt mir immer noch die Liste, nicht die spezifische, die es verwendet ... Aber bei einer zweiten Überprüfung ist Verdana irgendwie in die Liste der Schriftfamilien gekommen, was die Ursache für mein ursprüngliches Problem sein würde. So danke.

— Lavaturtle

1

Firebug teilt Ihnen auch mit, welche Regeln ausgelöst werden, um dem Element diese Schriftart zu geben - sehr nützlich, um herauszufinden, wo Ihr CSS schief geht.

— RichieHindle

Safari 4 Beta hat auch einen WebInspector (könnte ein enthäuteter Feuerkäfer sein)

— vikingosegundo

1

Ich denke, Sie erhalten immer die vollständige Liste, egal welches Tool Sie verwenden. Die verwendete Schriftart ist die erste in der Liste, die auf Ihrem Computer installiert ist.

— Jeroen

2

Firebug (1.11.4, möglicherweise auch früher) hebt die aktuelle Schriftart in Blau hervor.

— Mark Vrabel

1

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

— Dave Vogt
quelle

Leider zeigt sogar Context Font nur die berechnete CSS-Familie, die beispielsweise serif oder serifenlos sein kann. Wenn in der berechneten Schriftart kein Zeichen vorhanden ist und der Browser es von einer anderen Schriftart aufnimmt, zeigt Context Font weiterhin die berechnete Schriftfamilie an, nicht die tatsächliche Schriftart.

— Jukka K. Korpela

0

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!

— Alan H.
quelle