/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;Font-Stacks
Chris Coyier am
Ich habe schon einige Schriftarten-Stacks verwendet, wie zum Beispiel einen, der „Helvetica Neue“ enthielt, und die Systemschriftart wurde nicht richtig auf dem Bildschirm angezeigt. Ich musste sie aufgeben.
Vielleicht brechen Typen in bestimmten Größen auf einer Webseite zusammen?
Es scheint, dass der Grund dafür, dass die Schriftarten (in Firefox) nicht korrekt angezeigt wurden, darin lag, dass Clear Type in Windows nicht aktiviert war.
Schauen Sie sich das hier an, wenn Schriftarten für Sie in Firefox unter Windows schlecht aussehen: http://support.microsoft.com/kb/306527
Chris, danke für die Nennung meines Artikels. Rückblickend sind einige dieser Schriftarten-Stacks etwas schwerfällig und könnten gestrafft werden. Ich würde jedem, der diesen Schnipsel sieht, raten, den Artikel zuerst zu konsultieren, bevor er einen Schriftarten-Stack pauschal übernimmt, und die lebhafte Diskussion, die im SP-Forum folgte, zu studieren.
Windows-Benutzer haben einige Schwierigkeiten, Versionen von Helvetica zu finden, es sei denn, sie sind bereit, dafür zu bezahlen. Es gibt eine gewaltige Anzahl schlecht gemachter „Raubkopien“ der Helveticas da draußen. Ich hatte einige, darunter eine, die Überschriften in kyrillischer Schrift anzeigte (?!). Ich habe sie alle gelöscht, bis ich entweder einen legitimen Weg gefunden habe, kostenlose Exemplare zu erhalten, oder mir einige der Kern-Helveticas leisten kann, einschließlich Helvetica Neue. Im Allgemeinen werden die grundlegenden Helvetica-Schriftarten auf Monitoren auch bei relativ extremen Größen gut dargestellt – weit besser als ihr b@stard-Cousin Arial.
Das gefällt mir.
Mein bevorzugter Schriftarten-Stack ist
font-family:sans-serif;
Chris,
Können Sie für Leute, die diese Stacks kopieren und einfügen, einen Fehler im ersten Stack ändern?
„DejaVu Serif,“
Sollte sein
„DejaVu Serif“,
Danke! Tolle Arbeit!
Max Black und andere, bitte bedenken Sie die Systemauslastung, wenn Sie Schrott-Schriftarten herunterladen, um Leute einzusperren, die denken, dass jede Schriftart einer Schriftfamilie auf ihrem System installiert sein muss. LOL! Das soll die einfach, natürlich und lebendig gute Arbeit von codestyles.org (mehr als das Auge sieht) in keiner Weise schmälern. Aber... Verwenden Sie nur gekaufte Schriftarten, die Sie persönlich von Agfa, Adobe, Microsoft, ITC und anderen von Monotype akkreditierten „Agenten“ erworben haben, und melden Sie jedes abweichende Verhalten an so viele Gießereien, wie Sie können. Wenn Sie das getan haben, löschen Sie alle Ihre irrationalen Beiträge ... oder bearbeiten Sie sie so, dass klar gezeigt wird, warum Schrott in keinem ernsthaften Thread etwas zu suchen hat [Max, G u könnten dort mehr zu sagen haben als jeder andere in Region „?“ – wo auch immer Sie sind. Amen. BURB Dieser Kommentar sei von toten Zentrum des schrottigsten Stinktierhaufens, der jemals im Cyberspace verrotten ist, gekernt.]
Ja Ryan, tolle Arbeit von Chris, beste Schnipsel-Tonic der Welt. Auch wenn Strg-A ein wenig verrückt ist.
Sei getröstet! Dieses Snippet hat fast am Ende jeder Zeile Fehler gemacht. Angesichts der hässlichen Kommentare, die aus der ekelhaften visuellen Beleidigung einer generischen Schriftart im heutigen bunten Internet entstehen, fehlt Chris' Schriftfamilienbemühung nur noch eine Funktion, die sich mit der Häufigkeit installierter Schriftarten befasst: Fünf Basisschriftarten entsprechen jeweils genau einer beliebtesten Variante dieser Typografie für jeden OS-Typ. Zum Beispiel „besitzt“ Serifen Times New Roman (Win), Times (Mac) und Century Schoolbook L (Uni): in beliebiger Reihenfolge sollten diese drei Typografien unmittelbar links von „serif“ platziert werden. Sie sind so eingestellt, dass sie 99,9-100 % von allem, was danach kommt, verdrängen. Ebenso die anderen vier Zweige. Dann sollte ein Webfont-Skript auf die richtig gestapelte Website angewendet werden – aktuelle Best Practice.
Sie können mit hoher Geschwindigkeit jede Autobahn entlangfahren, aber wenn Sie rückwärts fahren, ist das keine gute Sache. Es gibt zehn Arten von Fahrern auf dieser Welt, einer ist binär und der andere ist verloren.
Hallo Chris,
Ich habe gerade eine visuelle Schriftarten-Stack-Bibliothek erstellt, mit der Sie einfach per Knopfdruck einen Schriftarten-Stack kopieren und in Ihr CSS einfügen können. Ich habe alle Standard-Stacks aufgenommen, aber sie werden definitiv noch mit einigen ausgefalleneren, weniger gängigen Stacks wachsen. Sie finden sie unter cssfontstack.com.
Kommentare und Vorschläge sind mehr als willkommen.
@Denis – Schönes kleines Werkzeug, herzlichen Glückwunsch.
Persönlich würde ich keinen Schriftarten-Stack verwenden, der Schriftarten enthält, die ich nicht selbst für das jeweilige Layout getestet habe. Während diese Schriftarten-Stacks eine schöne Referenz sind, möchte ich eine Warnung aussprechen, sie blind als solche zu verwenden ;)
Dem „sans serif“-Fallback in jeder Liste fehlt der Bindestrich, es sollte „sans-serif“ heißen.
Ach, ich wünschte, Sie würden Beispiele für jedes einfügen!
Mit freundlichen Grüßen,
Geoff
Ich versuche nicht, Spam zu machen oder so etwas, aber ich habe einen jsFiddle für all diese Schriftarten-Stacks erstellt, nur um zu sehen, wie sie aussehen. Mein Favorit ist „Modern Georgia-based serif stack“ und „Traditional Garamond-based serif stack“. http://jsfiddle.net/mkRXx/embedded/result/
Wie wäre es mit einem schmalen Sans-Serif-Stack?
Hallo, was denkst du über die Verwendung von Google Fonts? In der Tat könnte es effizienter sein, da die Schriftarten auf einem 3P-Server gehostet werden?
Der Grund, warum ich Verdana benutze, ist die klare Unterscheidung zwischen Buchstaben, insbesondere „I“ und „l“. Gibt es einen Schriftarten-Stack, der diese Klarheit beibehält? (Der angegebene Verdana-Stack enthält Corbel und Lucida Grande, die beide für meine Zwecke fehlschlagen)
Ich habe den Palatino Linotype-Stack getestet und kann ihn unter Android überhaupt nicht zum Laufen bringen. Gibt es ähnliche Optionen, die Android hätte?
Tests zeigen, dass mobiles Android jeden Stack, der Palatino enthält, verwirft und automatisch Droid Serif zuweist, egal wo Palatino im Stack steht. Ich weiß nicht, welche anderen erzwungenen Ersetzungen es in mobilem Android gibt.
Es wäre großartig, wenn wir einer Schriftart einen Identifikator hinzufügen könnten, um zu testen, welche in jedem Browser angezeigt wird. Z.B. arial ist rot, times ist blau usw. Eine weitere Idee ist ein Pseudo-Element. Wenn arial erscheint, erscheint das Wort arial davor. Dies würde viel Code erfordern, um jede der obigen Schriftarten zu identifizieren, aber weniger, um einen einzelnen Stack auf Ihrer Website zu testen.
Aufgrund der schwachbrüstigen Darstellung von „Hoefler Text“ in garstig fetter Form durch Apple Safari in letzter Zeit habe ich es als hilfreich empfunden, den String „HoeflerText-Regular“ vor „Hoefler Text“ anzugeben, wenn ich auf Laptop-Safari ziele. (Stand OSX 10.11.5)
(N.b., „HoeflerText-Regular“ allein reicht nicht aus. Laptop Firefox unter OSX 10.11.5 bevorzugt „Hoefler Text“.)
Interessanter Artikel. Gibt es ein aktuelles Update für diese Schriftarten-Stacks?
Kennt jemand einen guten Fallback-Schriftarten-Stack für Montserrat? Ich benutze ihn ziemlich oft bei den Designs, die ich in letzter Zeit erhalte, und ich möchte einen anständigen Fallback-Stack erstellen, da ich Webfonts in den von mir erstellten HTML-E-Mails verwende und eine gute Fallback-Stack unerlässlich ist, da die Unterstützung für Webfonts in HTML-E-Mails sehr gering ist.
Ich habe nach demselben gesucht und mich entschieden, meinen eigenen zu erstellen. Dieser Stack ist gut, weil die führenden Schriftarten sowohl über Google Fonts als auch über Typekit verfügbar sind. Source Sans ist Montserrat sehr ähnlich. Ich lasse Open Sans weg, weil es keine Geometrische ist. Helvetica Neue ist meiner Meinung nach etwas besser, aber die meisten Rechner haben og Helvetica installiert. Arial Black wäre, wenn Sie natürlich ein starkes Gewicht verwenden, und dann ja. Feedback willkommen.
font-family: 'Montserrat', 'montserrat', 'Source Sans', 'Helvetica Neue', Helvetica, 'Arial Black', Arial, sans-serif;Die Reihenfolge einiger dieser Stacks scheint seltsam.
Warum ist zum Beispiel im Helvetica-Stack „Helvetica Neue“, Helvetica, Arial“ nicht zuerst in der Liste?
Aufgrund der Kommentare von mARK und ANT, teilweise, frage ich mich. Gibt es irgendwo eine Referenz dafür, was ich am wahrscheinlichsten überall für Generika bekomme? Zum Beispiel sehe ich auf iPadOS Safari, dass „font-family:serif“ „font-family:’Times New Roman’” ergibt (oder umgekehrt). Kann ich herausfinden, was „serif“ und „sans-serif“ am wahrscheinlichsten ergeben? Könnte viel Tipparbeit für die Typografie-Faulen sparen.