[LOGO] ITM praktiker - MULTI MEDIA & ELEKTRONIK

Testen Sie selbst: Welche Schriftarten Ihr Webbrowser kennt


Wenn Sie tieferen Einblick in die Technik hinter der Darstellung von Webseiten auf Ihrem Webbrowser bekommen wollen, bieten wir Ihnen auf dieser Seite einige Möglichkeiten, herauszufinden, welche Schriftarten von Ihrem Gerät erkannt und genutzt werden können. Dies ist vor allem dann interessant, wenn Sie sich selbst mit Webprogrammierung und Webdesign beschäftigen. - Die Abfrage-Ergebnisse werden ausschließlich innerhalb Ihres Webbrowser-Fensters generiert und dargestellt. Sie werden daher nicht weitergeleitet und auch nicht auf Ihrem Gerät gespeichert.

[!> Die auf dieser Seite gegebenen Erläuterungen brauchen Sie nicht für das Nutzen von praktiker.at. Sie dienen lediglich zur Erklärung der angewandten Technik dahinter. Leser des "praktiker" haben typischerweise Interesse an technischen Hintergründen, Funktionsweise und den Überlegungen, die zu Lösungen geführt hatten.



Welche Schriftarten Ihr Webbrowser darstellen kann

Den Textinhalten auf einer Website sind normalerweise spezielle Schriftarten zugeordnet. Wenn manche Inhalte auf Webseiten über ein Gerät anders als über ein anderes dargestellt werden - beispielsweise am Fernseher anders als vom Notebook-PC oder Tablet -, dann liegt das daran, dass das betreffende Gerät - resp. der Webbrowser - die angeforderten Schriftarten nicht verfügbar hat und daher den Inhalt in einer Ersatz-Schriftart anzeigt.

Der Webbrowser kann nicht zwangsläufig alle Schriftarten nutzen, die das System des jeweiligen Geräts bietet und er kann umgekehrt auch eigene Schriftarten bieten, die den sonstigen Anwendungen des Geräts nicht zur Verfügung stehen. Es ist also möglich, dass am selben Gerät resp. Computer mit unterschiedlichen Webbrosern einige Schriftarten des Betriebssystems für einen Webbrowser verfügbar sind, für einen anderen aber nicht. Umgekehrt kann es auch sein, dass ein Webbrowser selbst Schriftarten bereitstellt, die für sonstige Anwendungen am Gerät oder Computer nicht zur Verfügung stehen.

Zusätzlich können auch über Webseiten sogenannte Webfonts geladen werden. Webfonts stehen dann nur für die Verwendung für die Inhalte auf der betreffenden Webseite zur Verfügung.

Wenn Webfonts nicht dargestellt werden: Sicherheitseinstellungen, Werbeblocker, Firewall

Alle heute aktuellen Webbrowser können Webfonts darstellen. Ausnahmen sind nur Nur-Text-Webbrowser wie "Lynx" - bei denen eben überhaupt keine grafische Gestaltung sichtbar ist. Wenn bei Ihnen Webfonts nicht angezeigt werden, dann liegt es höchstwahrscheinlich an der Konfiguration des Webbrowsers oder evtl. diesem vorgeschalteten Inhaltsfiltern.

Die meisten Webbrowser bieten eine Möglichkeit, die Nutzung von Webfonts abzuschalten. Es kann kann sich dabei auch um eine Abschaltung handelt, die in Verbindung mit einer Sicherheitsstufe bei den Sicherheitseinstellungen des Webbrowsers wirksam wird. Oder um einen Werbeblocker, der u.a. das Herunterladen von Webfonts unterbindet. Oder eine Firewall.

Es ist freilich nicht so wichtig, dass Webfonts funktionieren. Selbstverständlich kann es auch sein, dass das von der Website aus falsch programmiert worden ist. Dann funktioniert das zwar auf einigen - diesbezüglich gutmütigeren - Webbrowsern, aber nicht auf allen.

Hier unten die Webfonts sind jedenfalls richtig programmiert und müssten zumindest seit Internet Explorer 9 funktionieren und sowieso zumindest bei allen Webbrowsern, die vor zehn Jahren oder später erschienen sind.

[!> Evtl. keine Webfonts unter Internet Explorer oder Edge. Webfonts - wie die beiden letzten Beispiele hier auf dieser Seite - werden evtl. bei Internet Explorer oder Edge nicht genutzt, wenn unter "Internetoptionen > Sicherheit" das Wahlfeld "Geschützten Modus aktivieren" angewählt ist. Ähnliche Einschränkungen können auch bei anderen Webbrowsern durch Sicherheitseinstellungen vorkommen. Sehr alte Webbrowser unterstützen evtl. generell keine Webfonts.

| Testen Sie selbst: Welche Schriftarten Ihr Webbrowser kennt |

Grober, einfacher Test für Darstellung einiger Schriftarten

Mit Folgendem kann einerseits getestet werden, welche Schriftart vorhanden ist und andererseits auch, ob eine Schriftart automatisch vom Browser resp. System durch eine andere Schriftart ersetzt wird.

Zur leichteren Identifizierung der Schriftarten wird jeweils eine Zeichenkette gezeigt mit Zeichen, die typischerweise die markanten Unterschiede zwischen den Schriftarten zeigen.

Generische Schriftart "monospace" als Vergleichsbasis

Wenn eine Schriftart für den Webbrowser nicht verfügbar ist oder vom Browser nicht auf eine andere Schriftart umgeleitet wird, dann wird in der nachfolgenden Muster-Liste "monospace" - beispielsweise Schreibmaschin-Schrift "Courier New" - gezeigt. Schriftarten, die für den Webbrowser verfügbar sind, sind einerseits die Schriftarten des Geräts oder Computers und andererseits die Schriftarten, die als Webfonts von der jeweiligen Webseite - in diesem Fall eben von praktiker.at - zusätzlich geladen werden.

Im Prinzip funktioniert die Angabe der Schriftart so, dass mehrere Schriftarten hintereinander angegeben werden und die erste davon, die auch am jeweiligen Computer oder Gerät verfügbar ist, wird dann verwendet. Damit nicht zu sehr unerwartete Darstellungen passieren können, wird sozusagen als Rettungsanker als letzte Alternative eine der generischen Schriftarten angegeben. Namen für die generischen Schriftarten sind beispielsweise "serif", "sans-serif", "cursive" oder "monospace". - Diesen generischen Schriftarten sind am jeweiligen Gerät vorhandene Schriftarten zugewiesen. Diese generische Schriftart wird dadurch immer "gefunden".

Um zu einem einigermaßen vorhersehbaren Ergebnis zu kommen, wird also als erstes die optimal gewünschte Schriftart angegeben, danach folgend die Alternativen und zum Schluss die passende generische Schriftart.

Bei manchen Systemen - beispielsweise E-Book-Reader, Fernseher oder generell etwas simpleren Browsern - wird allerdings auch "monospace" durch eine "normale" Schriftart ersetzt. Als erstes Muster wird "monospace" gezeigt, um das sehen zu können. Monospace sollte eben wie eine typische Schreibmaschin-Schrift ausschauen mit gleich großen Abständen pro Zeichen.

Kleinere Schriftgröße, wenn nur "monospace" als Schriftart angegeben ist bei Safari, Chrome, Firefox

Eine Besonderheit gibt es, wenn ausschließlich "monospace" als Schriftart angegeben ist - so wie im ersten Beispiel: Manche Webbrowser - beispielsweise Safari, Chrome und Firefox - wenden dann eine kleinere Schriftgröße an. Dies gilt nur dann, wenn ausschließlich "monospace" als Schriftart angegeben ist (Beispiel: font-family: monospace;). Es gilt nicht, wenn "monospace" verwendet wird, weil davor angegebene Schriftarten nicht verfügbar sind (Beispiel: font-family: Consolas, Courier, monospace;).

Bei Desktop-Webbrowsern ist die Grundeinstellung für die Schriftgröße typischerweise 16px. Bei Webbrowsern, die monospace kleiner darstellen, ist das bei monospace typischerweise 13px.

Diese sonderbare Vorgangsweise dürfte ursprünglich daher rühren, dass manche Monospace-Schriftarten bei selber Schriftgröße erheblich größer dargestellt werden als andere Schriftarten.

So erkennen Sie ob Schriftart vorhanden oder nicht - und wenn nicht, ob sie durch eine ähnliche ersetzt wird

Wenn eine Schriftart zur Nutzung vorgesehen ist am jeweiligen System und Webbrowser - nicht jeder Webbrowser kann alle Schriftarten nutzen, die vom Betriebssystem bereitgestellt werden. Es ist also beispielsweise möglich, dass Sie sowohl "Arial" als auch "Helvetica" installiert haben, aber der Webbrowser nur eine der beiden Schriftarten für beide Schriftarten einsetzt. Beispielsweise die schon älteren Adobe-Typ-1-Schriftarten werden von den meisten Webbrowsern - und auch vielen anderen Anwendungen - nicht angezeigt.

Hier unten in der Auflistung funktioniert das so:

Falsches deutsches Anführungszeichen Ende beispielsweise bei Corbel, Courier, Tahoma und Verdana

Am Anfang und am Ende der Schriftmuster sind jeweils die Anführungszeichen Anfang und Ende, also unten und oben. Wie Sie vielleicht sehen können, ist bei vielen Schriftarten das Anführungszeichen Ende falsch.

Richtig ist es freilich, dass das Anführungszeichen Anfang unten wie "99" aussieht und das Anführungszeichen Ende oben wie "66" aussieht. Im Englischen ist es übrigens - beide oben - "66" und "99".

Beispielsweise bei Corbel, Courier, Tahoma und Verdana sieht das - falsch - wie ein spiegelverkehrtes "66" aus. Diese Schriftarten sollte man auf der eigenen Website vielleicht nicht verwenden, wenn man diese Zeichen verwenden will.

In der Regel wird auf Webseiten - wie auch hier - einfach das Zollzeichen für beide Anführungszeiten verwendet - wie früher bei Schreibmaschine. Der Grund dafür liegt auch in der oft automatisch gelösten - und nicht immer fehlerfreien - Umsetzung. In der Hauptsache aber darin, dass das deutsche Anführungszeichen Ende bei vielen stark verbreiteten Schriftarten einfach falsch ist.

Die Anführungszeichen - für die jeweilige Sprache passend - werden normalerweise automatisch erzeugt, sobald ein Zollzeichen getippt wird - oder bei Umwandlung eines vorhandenen Textes. Das ist allein deswegen unvermeidbar, weil es auf der Tastatur nach wie vor keinen fixen Platz für Anführungszeichen gibt. Das ist nicht immer fehlerfrei und es erfordert vor allem fehlerfreies Tippen rund um die Anführungszeichen, damit das richtig umgesetzt wird. Außerdem ist es dann schwieriger, das Zollzeichen für seine eigentliche Verwendung zu nutzen. Bei einer solchen Umwandlung bleibt das Zollzeichen ein Zollzeichen in der Regel dann, wenn es auf eine Ziffer folgt. In der Praxis schaut der Zusammenhang für die Verwendung des Zollzeichen als Zollzeichen nicht zwangsläufig immer so aus. Es ist erheblich störender, wenn das falsch umgewandelt wird, hingegen die Zollzeichen als Anführungszeichen ist man gewohnt.

In Anlehnung an die Verwendung bei der Computer-Programmierung wird das Zollzeichen übrigens auch als "Kodierungszeichen" bezeichnet. Also einfaches und doppeltes Kodierungszeichen. Analog dazu das Quasi-Apostroph, das auch ersatzweise konventionell als einfaches Anführungszeichen eingesetzt wird. Das Apostroph wird übrigens ja sogar in Drucksachen zumeist falsch gemacht - richtig wäre hochgestellt "9". Auch dafür gibt es keine Taste auf der PC-Tastatur.

Auch wenn Sie spezielle Anführungszeichen auf Ihrer Website einsetzen wollen, so sollten Sie das jedenfalls für Kommentarbereiche lieber nicht tun. Da wird typischerweise sehr schlampig getippt und dann ist das schwieriger lesbar, wenn die Anführungszeichen dann - zwangsläufig häufig - falsch umgesetzt werden.

Es ist uns freilich auch bekannt, dass es tonnenweise theoretische Abhandlungen darüber gibt, was korrekte Typographie ist und wie schwierig es ansonsten für den Leser wäre, Anfang und Ende eines Bereichs unter Anführungszeichen zu erkennen. In der Praxis gibt es halt keine Idealbedingungen. Es gibt sehr stark verbreitete Schriftarten, bei denen das deutsche Anführungszeichen Ende falsch ist. Man kann dem User nicht vorschreiben, welchen Zeichensatz er installiert haben soll oder welchen er vielleicht bevorzugt und daher seinen Webbrowser so konfiguriert hat. Und wenn dieser Idealzustand nicht gegeben ist, dann schaut das einfach scheußlich aus. In der Praxis. Anfang und Ende eines Bereichs innerhalb Anführungszeichen erkennt jeder mühelos an den Zeichen davor und danach.

In einer gedruckten Zeitschrift - wie auch dem "praktiker" - wird das freilich korrekt gemacht. Aber da kann man sich die Schriftart aussuchen.

„AaBbe1370GgIijKlMµQRrW“ = monospace (generisch)
„AaBbe1370GgIijKlMµQRrW“ = Courier New
„AaBbe1370GgIijKlMµQRrW“ = Courier
„AaBbe1370GgIijKlMµQRrW“ = Consolas
„AaBbe1370GgIijKlMµQRrW“ = Droid Sans Mono(Android)
„AaBbe1370GgIijKlMµQRrW“ = Lucida Console
„AaBbe1370GgIijKlMµQRrW“ = Andale Mono
„AaBbe1370GgIijKlMµQRrW“ = Monaco

„AaBbe1370GgIijKlMµQRrW“ = serif (generisch)
„AaBbe1370GgIijKlMµQRrW“ = Georgia
„AaBbe1370GgIijKlMµQRrW“ = Constantia
„AaBbe1370GgIijKlMµQRrW“ = Cambria
„AaBbe1370GgIijKlMµQRrW“ = Noto Serif (Android)
„AaBbe1370GgIijKlMµQRrW“ = Times New Roman
„AaBbe1370GgIijKlMµQRrW“ = Times
„AaBbe1370GgIijKlMµQRrW“ = Times LT

„AaBbe1370GgIijKlMµQRrW“ = sans-serif (generisch)
„AaBbe1370GgIijKlMµQRrW“ = Verdana
„AaBbe1370GgIijKlMµQRrW“ = Roboto Light (Android)
„AaBbe1370GgIijKlMµQRrW“ = Roboto Regular (Android)
„AaBbe1370GgIijKlMµQRrW“ = Roboto Medium (Android)
„AaBbe1370GgIijKlMµQRrW“ = Roboto Bold (Android)
„AaBbe1370GgIijKlMµQRrW“ = Droid Sans (Android)
„AaBbe1370GgIijKlMµQRrW“ = Fira Sans (Firefox OS)
„AaBbe1370GgIijKlMµQRrW“ = San Francisco (iOS, MacOS)
„AaBbe1370GgIijKlMµQRrW“ = DejaVu Sans
„AaBbe1370GgIijKlMµQRrW“ = Tahoma
„AaBbe1370GgIijKlMµQRrW“ = Segoe UI
„AaBbe1370GgIijKlMµQRrW“ = Arial
„AaBbe1370GgIijKlMµQRrW“ = Helvetica
„AaBbe1370GgIijKlMµQRrW“ = Helvetica Neue
„AaBbe1370GgIijKlMµQRrW“ = Geneva
„AaBbe1370GgIijKlMµQRrW“ = Futura
„AaBbe1370GgIijKlMµQRrW“ = Corbel
„AaBbe1370GgIijKlMµQRrW“ = Calibri
„AaBbe1370GgIijKlMµQRrW“ = Candara
„AaBbe1370GgIijKlMµQRrW“ = Frutiger Linotype
„AaBbe1370GgIijKlMµQRrW“ = Impact
„AaBbe1370GgIijKlMµQRrW“ = Impact Bold

„AaBbe1370GgIijKlMµQRrW“ = cursive (generisch)
„AaBbe1370GgIijKlMµQRrW“ = Segoe Print
„AaBbe1370GgIijKlMµQRrW“ = Segoe Script
„AaBbe1370GgIijKlMµQRrW“ = Comic Sans MS
„AaBbe1370GgIijKlMµQRrW“ = Comic Sans
„AaBbe1370GgIijKlMµQRrW“ = Dancing Script (Android)
„AaBbe1370GgIijKlMµQRrW“ = Dancing Script Regular (Android)
„AaBbe1370GgIijKlMµQRrW“ = Comic Neue bold (Webfont)
„AaBbe1370GgIijKlMµQRrW“ = DesyrelRegular (Webfont)
„AaBbe1370GgIijKlMµQRrW“ = ppr (Webfont)

| Testen Sie selbst: Welche Schriftarten Ihr Webbrowser kennt |

Font-Detektor - Welche Schriftarten auf Ihrem Computer, Smartphone, Fernseher etc. installiert sind

Über nachfolgend verlinkte Website werden die gängigsten Schriftarten abgefragt und ausgegeben, ob diese auf Ihrem Computer oder Gerät installiert sind resp. welche Schriftarten ihrem Webbrowser zur Verfügung stehen. Das ist vor allem beispielsweise bei Fernsehern interessant, bei denen es mitunter kaum möglich ist, herauszubekommen, welche Schriftarten installiert sind.

Das Script auf der nachfolgend verlinkten Website fragt eine Schriftart nach der anderen ab und vergleicht mit einer Referenzschriftart auf Basis der sich ergebenden Zeilenlänge einer Muster-Zeichenkette, ob die Schriftart angezeigt wird oder nicht. Wenn die Schriftart nicht angezeigt wird, dann wird die "Fallback"-Schriftart verwendet. Von dieser ist die Länge der Zeichenkette bekannt. Wenn sie also vom bekannten Wert abweicht, dann ist die betreffende Schriftart verfügbar.

Die - sehr interessante - Lösung dafür, das Vorhandensein einer Schriftart zu eruieren funktioniert dabei so, dass eine längere Zeichenkette der Schriftart - unsichtbar - dargestellt wird und dabei die Länge der Zeichenkette gemessen wird. Die verschiedenen Schriftarten unterscheiden sich durch unterschiedliche Laufweite der einzelnen Zeichen. Wenn die gesuchte Schriftart nicht vorhanden ist und daher die als Alternative angegebene Schriftart gemessen wird, dann ergibt sich eine identische Länge im Vergleich. Das bedeutet dann, dass die Schriftart nicht verfügbar ist. Umgekehrt: Wenn die Messergebnisse ungleich sind, ist die Schriftart vorhanden.

[!> Bei manchen Geräten resp. Webbrowsern funktioniert der Font-Detektor auf der nachfolgend verlinkten Webseite nicht korrekt. Dann werden beispielsweise alle Schriftarten als "true" - also als vorhanden - angezeigt. In den meisten Konfigurationen funktioniert der Test aber sehr gut und ist recht zuverlässig. 100%ige Sicherheit der Ergebnisse ist damit nicht möglich.

=>> www.lalit.org/lab/javascript-css-font-detect/

| Testen Sie selbst: Welche Schriftarten Ihr Webbrowser kennt |

| praktiker.at Top |
© 2013-2023 by Felix Wessely, Wien (Austria) - All rights reserved - Permalink - Nutzungsbedingungen - Impressum