Einführung in häufig verwendete Schriftarten im Web (Schriftarten, die von iOS- und Android-Browsern unterstützt werden)

Das Jahr ist zu Ende und es gibt weniger Aufgaben. Meinem Chef muss es unangenehm sein, mich untätig herumsitzen zu sehen. Also bekam ich eine Aufgabe: Ich sollte die von verschiedenen Browsern auf iOS- und Android-Geräten unterstützten Schriftarten recherchieren. Als ich das Wort „Forschung“ hörte, bekam ich Kopfschmerzen. Ich bin nur ein kleiner Programmierer, kein Produktentwickler, also habe ich solche Arbeiten noch nie gemacht. Nun, nehmen Sie es so, wie Sie es verstehen.

Obwohl ich am Front-End gearbeitet habe, kenne ich nicht einmal die grundlegendsten Schriftarten. Nach einem Tag der Recherche stellte ich fest, dass sich mein Wissen erheblich erweitert hatte. Ich habe vergessen, welcher Promi das gesagt hat: „Wenn Sie auf einem Gebiet 10 Jahre lang durchhalten, werden Sie ein Experte, egal, wie klein es ist.“ Ohne weitere Umschweife werde ich nun mein Wissen über Webfonts mit Ihnen teilen.

1. Bei der Webcodierung sind die von CSS standardmäßig verwendeten Webschriftarten begrenzt, obwohl wir in der neuen Version von CSS3 über das neu hinzugefügte Attribut @font-face spezielle, vom Browser geladene Schriftarten einführen können.

Wenn der Textinhalt einer Webseite in einem Browser angezeigt wird, werden die Textschriftarten in der Reihenfolge der vom Designer in CSS definierten Schriftfamilien angezeigt. Was ist eine Schriftfamilie? Eine Schriftfamilie ist ein Schriftname, den Sie im „font-family“-Code des CSS-Codes sehen, beispielsweise in der folgenden Codezeile:

Bitte beachten Sie, dass „sans-serif“ nicht der Name einer bestimmten Schriftart ist, sondern eine Schriftart, die letztendlich ausgewählt wird, wenn die oben beschriebenen Schriftarten ungültig sind. Sie wird als universelle Browserschriftart bezeichnet. Sie hängt von der standardmäßigen universellen Schriftart des von Ihnen verwendeten Browsers ab. Es kann „Arial“ oder „Helvetica“ sein.

2. Häufig verwendete Schriftarten auf Webseiten werden normalerweise in fünf Kategorien unterteilt: Serif, Sans-Serif, Monospace, Fantasy und Cuisive. Diese allgemeinen Namen ermöglichen es Benutzeragenten, eine Schriftart aus der entsprechenden Sammlung auszuwählen.
Serifenschriften haben kleine Details, sogenannte Serifen, am Ende der Striche. Diese Details sind besonders bei Großbuchstaben auffällig.
Serifenlose Schriftarten weisen an den Enden ihrer Striche keine Details auf und ihre Formen sind einfacher als bei Serifenschriften.
Eine Monospace- Schriftart, bei der alle Buchstaben gleich breit sind. Wird häufig zum Setzen von Codeblöcken in computerbezogenen Büchern verwendet.
Fantasy- und Cuisive -Schriftarten werden in Browsern nicht häufig verwendet und weisen deutliche Unterschiede zwischen den Browsern auf.

3. Häufig verwendete Schriftarten auf Webseiten

Serifenlos:

Helvetica: Zur Lieblingsschriftart der Designer gewählt, erfreut sie sich mit ihrem realistischen Stil und einfachen, modernen Linien großer Beliebtheit. Er gilt als der beste Webfont auf dem Mac, wird unter Windows jedoch aufgrund von Hinting schlecht angezeigt.
Arial: Ein „Klon“ von Helvetica, sehr ähnlich zu Helvetica, mit leichten Unterschieden in Details wie R und G. Ist die Schriftgröße zu klein und enthält sie zu viele Wörter, ermüdet dies die Augen. Die Anzeige bei Win und Mac ist normal
Lucida-Familie: Lucida Grande ist die Standardschriftart für die Mac OS-Benutzeroberfläche. Sie ist im humanistischen Stil gehalten und etwas lebendiger. Die Darstellung unter Mac ist besser als unter Win.
Verdana: Eine speziell für die Bildschirmanzeige entwickelte Schriftart mit humanistischem Stil. Sie kann auch in kleinen Größen noch klar angezeigt werden, die Schriftdetails gehen jedoch stark verloren, sodass sie für Überschriften besser nicht verwendet werden sollte.
Tahoma: Ebenfalls im humanistischen Stil gehalten, ähnelt die Schriftart Verdana ein wenig, ist jedoch etwas schmaler und hat eine etwas kleinere Punze. Sie war einst die Standardschriftart für Windows und ist auch nach Mac 10.5 standardmäßig installiert.
Trebuchet MS: Eine humanistische Schriftart, die für Microsoft entworfen wurde. Ich persönlich finde, dass ihre Persönlichkeit zu stark ausgeprägt ist und sie nicht hineinpasst, wenn sie nicht richtig verwendet wird.

Serife:

Georgia: Für die Darstellung von Fließtext ist grundsätzlich die Serifenschrift Georgia geeignet. Die Striche sind dick, die Serifen hell, die Umrisse groß, die kleinen Schriftarten klar und die Details in Ordnung.
Times: Times ist für Zeitungen konzipiert. Seine Besonderheit besteht darin, dass es mehr Text auf begrenztem Raum unterbringen kann. Die Striche sind schwächer und die kleine Schriftgröße auf dem Bildschirm wirkt ermüdend auf die Augen. Bei der Neugestaltung von Engadget wurde zunächst „Times“ als Haupttext verwendet, nach heftiger Kritik änderte man dies jedoch zu „Georgia“.

Chinesisch:

Songti: Die gebräuchlichste Schriftart für Windows. Kleine Schriftarten sind Punktmatrix-Schriftarten und große Schriftarten sind TrueType-Schriftarten. Große Schriftarten sehen jedoch nicht gut aus, daher sollten Sie sie besser nicht für Titel verwenden.
Microsoft YaHei: Eine neue Schriftart, die nach Vista eingeführt wurde. Sie hat einen guten Anzeigeeffekt, wenn Cleartype eingeschaltet wird, sieht aber ohne Cleartype verschwommen aus.
Chinesisch Xihei: Die chinesische Standardsprache für Mac.

4. Ich habe eine kleine Demo geschrieben und sie in verschiedenen Browsern getestet. Es gibt immer noch Unterschiede bei der Analyse dieser Schriftart durch verschiedene Browser.

Ergebnisse werden im IE8 angezeigt

In Firefox angezeigte Ergebnisse

5. Bei diesem Test haben wir Folgendes festgestellt :

Die Browser auf Android-Geräten sind nicht sehr leistungsstark (ich habe iOS noch nicht getestet, daher glaube ich nicht, dass sie viel besser sein werden). Es gibt nur drei gängige Schriftarten, die von den Browsern auf Android-Telefonen unterstützt werden:

sans-serif (sans serif)-Klasse: Arial; //Solange es auf die Sans-Serif-Klasse eingestellt ist, sieht es unabhängig von der Schriftart gleich aus.
Serifenklasse: Georgia; //Solange es auf die Serifenklasse eingestellt ist, sieht es unabhängig von der Schriftart immer gleich aus.
Monospace-Klasse (gleiche Breite) //Solange die Monospace-Klasse eingestellt ist, sieht es unabhängig von der Schriftart gleich aus.

An den Browsern mobiler Geräte muss noch gearbeitet werden.