Haben Sie das schon mal geschrieben?
body {
font-family: Helvetica, Arial, Sans-Serif;
}Sie denken sich: „Helvetica ist das Großartigste, also will ich das zuerst, dann Arial für PCs, denn hey, es ist ziemlich nah dran, und dann als Fallback, was auch immer McSansSerif für Verrückten-Computer mit praktisch keinen normalen installierten Schriftarten ist.“
Es stellt sich heraus, dass das viel besser ist
body {
font-family: Sans-Serif;
}Macs erhalten standardmäßig großartiges Helvetica. Auf PCs, selbst wenn sie Helvetica haben, kann es aus irgendeinem Grund schlechter aussehen als Arial, daher erhalten sie standardmäßig Arial. Und Sie sind immer noch durch das generische Schlüsselwort abgedeckt. Kürzer, einfacher, yay.
Danke an @mathias für den Hinweis auf den spezifischen Teil (29:32) dieses Videos von Paul Irish über HTML5 Boilerplate.
Wenn Sie diesen Helvetica-Stack erweitern und einige schönere Variationen verwenden möchten, wenn verfügbar, sehen Sie sich das hier an.
Das ist nur wahr, wenn die Browsereinstellungen zufällig so vorgenommen wurden. „sans-serif“ bedeutet „verwende die Standard-Sans-Serif-Schriftart des Clients“, die standardmäßig Helvetica und Arial sein kann, aber auch nicht, und sie kann vom Benutzer geändert werden. Auf meinem Ubuntu-Rechner wird das in der Ubuntu-Schriftart gerendert.
Der Wert „sans-serif“ besagt nur „überschreibe die Standardeinstellung des Browsers von Serif vs. Sans-Serif“, er sagt nichts darüber aus, Arial gegenüber Calibri oder etwas anderem zu wählen.
@shoutyman: Ist das nicht auch etwas Gutes? Wenn ich mir die Mühe gemacht habe, Ubuntu oder Gill Sans oder sogar Comic Sans als meine Sans-Serif-Schriftart festzulegen, wäre es schön, wenn die Website diese Wahl respektiert.
Absolut einverstanden. Gehen wir weiter: Wenn Sie auf Serifen-Schriftarten stehen, stellen Sie sie auf Georgia oder so etwas. Und wenn jemand Schriftarten aus Gründen der Lesbarkeit oder aus purer Sturheit festlegt, gibt es natürlich viele weitere Optionen, wie z. B. die Verwendung der eigenen Schriftarten der Website nie.
Mein Eindruck war jedoch, dass der Kern des Beitrags darin bestand, zu versuchen, „welche von Helvetica/Arial auf einem bestimmten Client besser gerendert wird“, was ein häufiges Ziel ist (z. B. kann Branding die Verwendung des einen oder des anderen vorschreiben, wobei das andere als nächstbester Fallback dient), und persönlich sehe ich „font-family: sans-serif;“ nicht als den richtigen Weg, dies zu tun.
(Ich denke, die Taktik von bfred.it unten ist eine gute.)
@Andy Nicht, wenn die Website nur mit dieser Schriftart richtig aussieht.
Ja, noch mehr. Wenn Sie in Ihrem Browser eine andere Standardschriftart festgelegt haben (z. B. die großartige russische kostenlose Schriftart „PT Sans“), wird diese angezeigt.
Wenn wir damit anfangen, dann sollten wir als Web-Leute nie die Farbe von Links, die Punktgröße von Überschriften oder die Hintergrundfarbe ändern, richtig?
Dem stimme ich vollkommen zu. Ja, eine Website mag so aussehen, wie sie aussehen soll, aber wenn eine Website nur auf EINE Weise ohne Anpassungen und Spielraum aussehen soll, gehen wir dann nicht rückwärts? Was wäre der Sinn, die Option zu haben, seine Standardschriftarten zu ändern, wenn sie keinen Zweck hätte?
Ich persönlich spiele damit nicht, aber Sean wirft einen guten Punkt auf. Konformität? Nein. Wenn jemand die Schriftart festlegt, die er als Fallback verwenden möchte, ist das sein Fallback.
Ich würde sagen, diese Methode ist vage, aber wenn Ihnen die richtige Einrichtung/Art von Computer und Dateien wichtig ist, gibt es kein Problem.
Habe nie daran gedacht. Ich hörte von der hässlichen Darstellung von Helvetica auf PCs, also benutze ich den Schriftstapel „Helvetica Neue“, Arial, sans-serif;
Dies zeigt Helvetica Neue auf Macs (alle haben sie) und Arial unter Windows, da die meisten PCs sie nicht haben
Obwohl ich für einfache Schriftstapel nur sans-serif verwende;
Ich folgte genau derselben Denkweise, bis ich einen Windows-Kollegen mit installierter Helvetica Neue sah. Sie schien Helvetica Neue-Condensed (oder ähnlich) anzuzeigen, anstatt der mittleren Gewichtung/Variante. Enttäuschend.
Seitdem verwende ich standardmäßig sans-serif für Text, bei dem die Typografie nicht über den Inhalt der Wörter hinaus kommunizieren soll, während ich weiterhin Schriftstapel für Überschriften verwende. Es ist ein günstiger Weg, ausdrucksstarke Typografie an prominenten Stellen beizubehalten und gleichzeitig das Risiko schwerwiegender Probleme für den Großteil des Inhalts zu reduzieren.
(Natürlich) variieren Zielgruppe und Bedürfnisse.
All die Jahre, die mit der Erstellung von Schrift-Hierarchien verbracht wurden … das wird eine harte Angewohnheit sein, die man ablegen muss!
Apropos, weiß jemand bei css-tricks, warum die Seite in Chrome und Firefox so schrecklich aussieht? Die Schriftart sieht einfach furchtbar aus.
Die Standard-Textkörper-Schriftart, Myriad Pro, ist nicht web-sicher. Das beste Schriftwerkzeug für das Web, das ich bisher gesehen habe, finden Sie unter http://www.typetester.org. Es listet die web-sicheren Listen, die Windows/Mac-Standardlisten auf und ermöglicht es Ihnen, verschiedene Größen/Zeilenhöhen/Buchstabenabstände/Farben zu testen.
Ich bin verliebt in die Art und Weise, wie diese Schriftart für mich gerendert wird. (Mac mit installierten CS5-Schriftarten – auch Chrome übrigens)
Nur web-sichere Schriftarten verwenden? Das ist der Sinn von Schriftstapeln… Ich finde, Myriad auf einer Webseite zu verwenden, auf der die meisten Benutzer Adobe-Produkte installiert haben, ist ziemlich genial. Jetzt, wenn wir nur noch eine schöne Schriftart-Darstellung für alle Computer bekommen könnten.
Es ist Myriad, aber über Typekit bereitgestellt: http://typekit.com/fonts/myriad-pro
Sie können auf dieser Seite Browserbeispiele sehen, wie es aussehen soll. Ich bin mir nicht sicher, warum es anders aussehen sollte, aber es ist durchaus möglich, dass entweder sie oder ich etwas falsch machen (für bestimmte Kombinationen von Browser/Plattform/Version).
Auf PC Vista mit installiertem Myriad Pro sieht es nicht besonders gut aus, http://i.imgur.com/e92sz.jpg
Myriad Pro installiert, PC, Win7, Fox4
http://image.freecy.tk/images/188_SNAG_0036.png
XP, keine Myriad* installiert, FF3: http://image.freecy.tk/images/266_ccfonthorror.png
sieht in Firefox und Chrome bei mir super aus. Was sind Ihre Betriebssystem- und Browserversionen? Nach meinem Verständnis und dem, was ich getan habe, werden Schriftarten, die über Typekit oder die Google API oder sogar FontSquirrel bereitgestellt werden, normalerweise in Firefox und Chrome in ihrem besten Zustand angezeigt und können in anderen Browsern visuell abgewertet werden. Ich bin nur neugierig.
Windows XP-Browser glätten Text nicht, es sei denn, Sie haben ClearType für das SYSTEM aktiviert. Kantenglättung ist in IE 7 und höher sowie in Firefox 4 automatisch aktiviert. Dies war der größte Hinderungsgrund für die Verwendung benutzerdefinierter Schriftarten für kleine Texte. Bald wird dies kein so großes Problem mehr sein...
für die Schriftart-Darstellung können Sie auch den CSS-Befehl text-rendering ausprobieren...
https://developer.mozilla.org/en/CSS/text-rendering
Ausgewählte Zitate vom Typekit-Support
Ich bin mir sicher, dass ich kürzlich etwas darüber gesehen habe, warum man nicht nur „san-serif“ verwenden sollte…
Auf jeden Fall bedeutet es, dass es in einigen Fällen zu seltsamen Interpretationen offen ist. Aber wenn es Ihnen egal ist, ist sauberer Code schönerer Code!
(Tatsächlich, wenn ich schnell in Opera Mac nachschaue, sieht es so aus, als ob es auf Lucida Grande zurückfällt)
Ich wusste nicht, dass ich sans-serif einstellen kann und es nur die Standard-Schriftarten anzeigt. Das werde ich bei meinem nächsten Website-Projekt verwenden. Danke für den Tipp Chris!
Ich habe font-family: ‘Helvetica Neue’, ‘HelveticaNeue’, Arial, Helvetica, Garuda, sans-serif; verwendet, aber einige Kunden mit Windows sehen alles fett und kursiv.
Cooler Tipp. :)
Außerdem: „Haben Sie das schon mal geschrieben?“ Wirklich??
Behobene Korrektur
Ich bin hier etwas neu, aber Schriftarten waren für mich eine Quelle der Frustration. Ihr vorheriger Beitrag forderte: font-family: „HelveticaNeue-Light“, „Helvetica Neue Light“, „Helvetica Neue“, Helvetica, Arial, „Lucida Grande“, sans-serif; ; nun scheint dies zu sagen: „Ändere Helvetica und Arial und benutze nur sans-serif.“ Heißt das also, Helvetica und Arial im ersten Code wegzulassen und den Rest zu belassen? Was ist mit „Lucida Grande“ – ich stelle fest, dass es hinter Helvetica und Arial stand – ABER ist es auf ALLEN Maschinentypen immer noch besser als einfaches „sans-serif“?
Und entschuldigen Sie meine Dummheit, aber: Ich stelle auch fest, dass Sie eine Größe von „300“ angeben – ich möchte, dass mein Web die bestmögliche Lesbarkeit hat, habe aber nicht alle auf meinem Computer installiert und kann es mir selbst nicht ansehen. Sind alle von gleicher Größe? Ich stelle fest, dass viele Schriftarten eine Größenanpassung für die Lesbarkeit erfordern.
Danke für die Hilfe
Obwohl kürzer einfacher sein mag und das Wissen, wie Browser Dinge behandeln, gut und gut ist. Ich denke wirklich, dass die Explizitheit die kurze und einfache implizite Methode übertrifft. Sie haben auch keine Garantie, dass Browser in Zukunft die gleichen Werte als Standard verwenden werden.
[…]es kann schlechter aussehen *als* Arial[…]
Verstanden, danke
Und was ist, wenn ein PC-Benutzer Helvetica installiert hat? Ich besitze einen Mac, aber es gibt Designer, die Windows benutzen. Das ist also der einzig richtige Weg
font-family: „Neue Helvetica“,”Helvetica Neue”,helvetica, arial, sans-serif;
Ich mache das schon seit Jahren, nachdem ich aufgehört habe, nach Pixelperfektion über Browser hinweg zu suchen, und mich stattdessen darauf konzentriert habe, Seiten zu erstellen, die flexibel genug sind, um Browserinkonsistenzen zu berücksichtigen. Es ist eine logische Schlussfolgerung, die gezielte Auswahl bestimmter Schriftarten ganz aufzugeben.
Ich war begeistert, als ich sah, dass Paul Irish zu derselben Schlussfolgerung gekommen war…
Zur Klarstellung eines Punktes in einem der vorherigen Kommentare: Shoutyman schien anzudeuten, dass sans-serif die Standard-Schriftart des Browsers ohne Styling anzieht. Das ist nicht der Fall, wenn Ihre Standardschriftart Times New Roman ist, überschreibt sans-serif dies mit Arial (oder Helvetica oder was auch immer).
Entschuldigung, falls ich den ursprünglichen Kommentar falsch interpretiert habe.
es „überschreibt die Standardeinstellung des Browsers von Serif vs. Sans-Serif“, aber wählt die Standard-Sans-Schriftart aus – da Times Serif ist, wird es überschrieben
zum Thema: Ich glaube, die Festlegung spezifischer Schriftarten ist immer noch am besten, wenn man ein exaktes Aussehen wünscht – besonders wegen möglicher zukünftiger Unterschiede bei den Standards (plus Kinder, die die Standards ihrer Mütter auf Comic Sans setzen ;)
Ich habe viele Tricks aus Ihrem Beitrag und den obigen Kommentaren gelernt. Danke
nette Artikel, gute Sachen
Guter Punkt! Aber „Helvetica Neue“ ist schöner als „Helvetica“, also bevorzuge ich
font-family: ‘Helvetica Neue’, sans-serif;
was Ihnen gibt: „Helvetica Neue“, Helvetica auf Mac und „Helvetica Neue“, Arial auf PC.
Ich kümmere mich nicht um Minderheiten, die die Standard-Browserschriftart ändern, da dies weniger als 1% ist.
Helvetica Neue wird auf vielen Browsern, einschließlich Chrome auf XP (manchmal), nicht so gerendert, wie sie sollte. Meiner Meinung nach ist sie eine der schlechtesten Schriftarten, die man für ein Projekt wählen kann.
Manchmal ist es gut, einige Standard-Tricks zu überdenken, die man einfach so macht. Danke dafür.
@claude Wir haben dieses Problem beim Testen auf unseren Windows XP-Maschinen. Wir haben nie herausgefunden, warum das passiert.
Hier ist ein weiterer nützlicher Link über Schriftstapel
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Seine Stylesheets so zu schreiben, dass sie von den Standardwerten auf Mac oder Windows abhängen, ist zu riskant, allein aus dem Grund, dass diese Standardwerte später geändert werden könnten.
Mann, ich kann nicht einmal die Navigation auf deiner Website finden – warum gibst du Leute Tipps?
Die Standards könnten sich ändern, aber dies ist ein risikoscheuer Ansatz. Standard-Umgebungsschriftarten werden aufgrund ihrer unaufdringlichen, konstant lesbaren Ausgabe gewählt. Wenn spezifische x-Höhen oder Pixel pro Em erforderlich sind, sind Standard-Schriftarten wahrscheinlich nicht Teil der Diskussion – was ein vollkommen gerechtfertigter Ansatz ist, nur ein anderer, der je nach Projekt variiert.
Während dies gut ist, um den Schriftstapel zu reduzieren und dem Benutzer die Kontrolle zu geben, frage ich mich, wie man überprüft, ob die Website über die unzähligen Kombinationen von Plattformen und Browsern hinweg benutzbar ist und sicherstellt, dass die Schriftarten lesbar und die Website nutzbar sind?
Nur weil jemand seine Standardschriftart auf Comic Sans einstellen kann, heißt das nicht, dass er es tun sollte. Offensichtlich gibt es bestimmte Benutzer, die von der Verwendung spezifischer Schriften profitieren können, aber eine Schrift ist Teil des Brandings und der visuellen Ästhetik einer Website. Würde zum Beispiel eine Geschichte auf news.bbc.co.uk die gleiche Gravitas tragen, wenn sie in Comic Sans gesetzt wäre? Wäre sie so lesbar? Ich glaube nicht.
Obwohl ich denke, dass das Web eine erstaunliche transformative Kommunikationsform ist, die alle gleichstellt (Benutzer und Unternehmen gleichermaßen), stimme ich Diskussionen wie diesen zu Seans Kommentar über die Änderung von Farben und Schriftgrößen zu und denke, dass wir genauso gut auf jegliches Styling verzichten könnten.
Um eine halbe Zeile Code zu sparen, definieren Sie besser einen tatsächlichen Schriftstapel.
Typografie ist ein wesentlicher Bestandteil des Webdesigns, um den wir mehrere Stunden damit verbringen, das restliche Design zu gestalten. Es als unbekannte Größe zu belassen, ist mir ein wenig zu beängstigend!
vielleicht eine dumme Frage, aber trotzdem
wie funktioniert das mit russischen, chinesischen usw. Einstellungen – vorausgesetzt, sie haben ihre Schriftarten möglicherweise als Browser-Standard festgelegt?
Wir Russen haben Arial als Standard in Browsern, obwohl ich es zu Calibri geändert habe.
Hmm, ich habe trotzdem einen anständigen Bug mit Helvetica (auf meinem PC). Jede Website mit Helvetica Neue als erster Wahl in CSS sieht so verdammt hässlich aus. Sie wählt eine super fette kursive HN-Schriftart… Hat jemand den gleichen „Bug“ oder eine Lösung dafür?
Wikipedia ist die einzige Website, auf der ich es verwendet habe. Meistens ist es besser, Benutzern die Wahl der Schriftart zu überlassen, anstatt Arial zu erzwingen.
Haha, das habe ich auch im Video gesehen. Ich dachte: „Genial!“
Danke fürs Teilen, es ist wirklich eine neue Idee, für mich bevorzuge ich es, alles konsistent zu halten, das ist gut für das Branding.
Ich mache das schon seit einiger Zeit, es ist schön. :)
Ich würde lieber die Kurzform verwenden. Ich mag die Art und Weise, wie Helvetica unter Windows XP gerendert wird, wirklich nicht. Wenn meine eigene Website auf einem Mac mit Helvetica schön aussieht und auf einem PC mit Arial etwas weniger schön, dann bin ich glücklich.
Ich würde jedoch die Verwendung eines CSS-Resets empfehlen.
Hmmm. Ich frage mich, wie viel Strom heute Morgen allein durch diesen besonderen Diskurs verbrannt wird. All die kleinen Computer, die fröhlich vor sich hin surren, all die kleinen Finger, die tippen, all die kleinen Konsumenten, die cyberschreien: „Ich-ich-ICH! Schau mich an! Hier ist, was *ICH* „denke“! Hier ist, was *ICH* „glaube“!“ Während der Planet langsam unter einer abscheulich schleimigen Schicht seines eigenen Cybersplooges erstickt.
Ich bin wohl etwas spät dran mit der Diskussion, aber ich konnte es nicht unbeantwortet lassen. Es gibt eine viel bessere Lösung, wenn Sie nicht auf die Kontrolle über Ihren Schriftstapel verzichten möchten, um Probleme mit der Schriftart-Darstellung in IE zu lösen: Verwenden Sie IE-bedingte Kommentare.
Liefern Sie Ihr Stylesheet mit dem Helvetica-ersten Schriftstapel aus und liefern Sie dann ein benutzerdefiniertes Stylesheet mit
<!--[if IE]><link type="stylesheet" href="ie.css"><![endif]-->an IE, um den Schriftstapel mit Arial zuerst zu überschreiben.Auf diese Weise erhält jeder Helvetica außer IE-Benutzern, und Ihre Typografie wird wahrscheinlich so aussehen, wie Sie es beabsichtigt haben.