<\/a><\/p>\n\n\n\nSchriftarten erkennen und identifizieren und weitere Analysen zu Aufbau und Gestaltung von Websites<\/h2>\n\n\n\n “Das sieht aber nett aus, was das wohl f\u00fcr eine Schriftart ist? Und was f\u00fcr eine Farbe?” Im Web wie im Garten ist es immer wieder anregend und interessant, sich mit den Ergebnissen der Bem\u00fchungen anderer Schaffender zu befassen. Praktischerweise bekommt der neugierige Web-G\u00e4rtner mit einem zeitgem\u00e4\u00dfen Browser alle Werkzeuge an die Hand, um die Styling-Geheimnisse seiner Lieblings-Internet-Seiten aufzudecken. Mit der Tastenkombination<\/p>\n\n\n\n
[Umschalt] + [Strg] + i<\/strong><\/p>\n\n\n\nwird der Werkzeugkoffer ge\u00f6ffnet:<\/p>\n\n\n\n
Die Developer-Tools (auch Entwicklertools, Werkzeuge f\u00fcr Entwickler oder Entwicklungstools). Einen Teil des Bildschirms nimmt jetzt ein – auf den ersten Blick recht un\u00fcbersichliches – Feld ein. Eine Men\u00fcleiste und verschiedene Quelltextausgaben sind typischerweise zu sehen.<\/p>\n\n\n\n
Auftritt: Der Inspektor<\/h2>\n\n\n\n Wird diese Schaltfl\u00e4che geklickt und man f\u00e4hrt anschlie\u00dfend mit dem
Keine weiteren Fragen – der Inspektor hat den Fall gel\u00f6st<\/p>\n\n\n\n
Verst\u00e4rkung: FontFace Ninja<\/h2>\n\n\n\n Wer es noch bequemer mag, kann statt des Inspektors auch gleich einen Ninja ins Rennen schicken. Die f\u00fcr Firefox und Chrome frei verf\u00fcgbare Browser-Erweiterung FontFace Ninja ist rein auf die Untersuchung der auf Websites verwandten Schriftarten spezialisiert und l\u00f6st diese Aufgabenstellung in besonders komfortabler Weise. Klickt man das FontFace Ninja-Symbol, so werden in einem Kasten alle in der gerade aktiven Website verwendeten Fonts aufgelistet. Klickt man einen dieser Fonts an, so kann man anhand vorgegebener Platzhaltertexte oder selbst eingegebener Textpassagen die Optik der jeweiligen Schriftart in Augenschein nehmen. Auch Bookmarks auf die Fonts k\u00f6nnen gesetzt werden, au\u00dferdem erscheint zu jedem Font ein Link. Je nach Verf\u00fcgbarkeit der Schriftart wird man damit auf eine Google-Suche zum Font oder direkt auf die Seite geleitet, unter der der Font zum Kauf oder zum freien Download angeboten wird.<\/p>\n\n\n\n
Eine sehr n\u00fctzliche weitere Funktion des FontFace Ninja, die aktuell noch als beta gekennzeichnet ist, ist die Analyse von Schriftarten in Bitmap-Grafiken. Klickt man bei aktivierter FontFace-Ninja-Box eine Grafik in der gerade ge\u00f6ffneten Website, so wird das Bild mithilfe des einschl\u00e4gigen Dienstes WhatTheFont analysiert und als Ergebnis werden zu den in der Grafik erkannten Texten die verwendeten – oder \u00e4hnliche – Schriftarten vorgeschlagen. Je nach Beschaffenheit des Bildes klappt das oft erstaunlich gut.<\/p>\n\n\n\n
Fazit: Web-Schriftarten entschl\u00fcsselt<\/h2>\n\n\n\n Mit Spitzenpersonal wie Inspektoren und Ninjas an Bord m\u00fcssen im Web entdeckte Schriftarten kein Geheimnis bleiben. Mit wenigen Mausklicks sind sie zu identifizieren und in vielen F\u00e4llen auch zur eigenen Verwendung verf\u00fcgbar.<\/p>\n","protected":false},"excerpt":{"rendered":"
“Das sieht aber nett aus, was das wohl f\u00fcr eine Schriftart ist? Und was f\u00fcr eine Farbe?” In der Web-Entwicklung wie im Garten ist es immer interessant, sich mit den Ergebnissen anderer Schaffender zu befassen. Praktischerweise bekommt der neugierige Web-G\u00e4rtner mit einem zeitgem\u00e4\u00dfen Browser alle Werkzeuge daf\u00fcr an die Hand.<\/p>\n","protected":false},"author":3,"featured_media":2707,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[93,109,101],"class_list":["post-839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-pflege","tag-tipps-und-anleitungen","tag-typographie","tag-umgang-mit-dem-web-browser"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/839"}],"collection":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/comments?post=839"}],"version-history":[{"count":3,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":24843,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/839\/revisions\/24843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media\/2707"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media?parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/categories?post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/tags?post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Anleitung](\"https:\/\/mainetcare.de\/wp-content\/uploads\/2019\/12\/schriftart-untersuchen.gif\" "\\"Schriftart")
<\/figure>\n\n\n\n