Schriftgröße in CSS -% oder em?
Frage
Wenn die Schriftgröße in CSS einstellen, soll ich mit einem Prozentwert (%
) oder em
sein? Können Sie den Vorteil erklären?
Lösung
Es ist eine wirklich gute Artikel über Web-Typographie auf .
Ihre Schlussfolgerung:
Sizing Text und line-height in ems, mit einem Prozentsatz auf dem angegebenen Körper (und eine optionale Einschränkung für Safari 2), wurde gezeigt, bereitzustellen, genau, veränderbarer Text in allen Browser heute üblich. Das ist eine Technik, können Sie in Ihrem Kit setzen Tasche und Verwendung als Best Practice für Sizing Text in CSS suchen, die sowohl Designer und Leser.
Andere Tipps
http://archivist.incutio.com/viewlist/css-discuss/1408
%: Einige Browser nicht verarbeitet Prozent für font-size aber interpretiert 150% als 150px. (Einige NN4 Versionen, zum Beispiel.) IE hat auch Probleme mit Prozent auf geschachtelte Elemente. Es IE scheint verwendet Prozent im Verhältnis zu Darstellungsfeld, anstatt relativ zu Elternelement. Noch ein anderes Problem (Obwohl korrekt gemäß der W3C Spezifikationen), in Moz / NG6, können Sie nicht verwenden Prozent bezogen auf Elemente ohne angegebene Höhe / Breite.
em: Manchmal verwenden Browser die falschen Referenzgröße, sondern der relativen Einheiten es ist der mit mindestens Probleme. Vielleicht haben Sie es finden interpretiert als px manchmal aber.
pt: Unterscheidet sich stark zwischen den Auflösungen und sollten nicht verwendet werden Zur Ausstellung. Es ist ziemlich sicher für Druck Verwendung though.
px: Die einzige zuverlässige absolute Einheit auf Bildschirm. Es könnte falsch sein obwohl in gedruckter Form interpretiert, als ein weisen in der Regel bestehen aus mehreren Pixel, und somit wird alles lächerlich klein.
Beide passen Sie die Schriftgröße relativ zu dem, was es war. 1.5em ist das gleiche wie 150%. Der einzige Vorteil scheint die Lesbarkeit zu sein, wählt je nachdem, was Sie am bequemsten mit.
Da (fast?) Alle Browser jetzt die Seite als Ganzes Größe verändern, anstatt nur den Text, frühere Ausgaben mit px
vs. %
vs. em
s in Bezug auf die verfügbare Schrift Redimensionierung sind eher strittig.
Also, die Antwort ist, dass es wahrscheinlich keine Rolle spielt. Verwenden Sie, was für Sie arbeitet.
%
ist schön, weil es für die relative Größe neu bestimmen können.
px
ist schön, weil es ziemlich einfach ist, die Erwartungen zu verwalten, wenn Sie es.
em
kann nützlich sein, wenn auch für Layout-Elemente verwendet, da es für eine proportionale Dimensionierung in Bezug auf die Textgröße ermöglichen kann.
Der wirkliche Unterschied kommt offensichtlich, wenn Sie es nicht für Schriftgrößen verwenden. eine padding
von 1em
Einstellung ist nicht die gleiche wie 100%
. em
ist immer relativ zur Schriftgröße. Aber %
könnte font-size relativ sein, Breite, Höhe und wahrscheinlich einige andere Dinge, die ich weiß nicht, über.
Im Hinblick auf die Differenz zwischen der CSS-Einheiten %
und em
.
Soweit ich verstehe diese beiden Einheiten entsprechen, also (zumindest theoretisch / konzeptionell, aber möglicherweise nicht, wie diese beiden Einheiten können in Browsern implementiert werden), wenn Sie Ihren em
Wert mit 100
multiplizieren und dann em
mit %
ersetzen sollte das gleiche?
Wenn es tatsächlich einiger wirklicher Unterschied zwischen em und%, dann kann es jemand erklären (oder einen Link zu einer Erklärung zur Verfügung stellen)?
(Ich wollte diesen Kommentar von mir hinzuzufügen, wo es wäre, das heißt gegliederte knapp unterhalb der Antwort von "Liam, answered Sep 25 '08 at 11:21"
gehört, da ich mag auch wissen, warum seine Antwort Downvoted war, aber ich kann nicht herausfinden, wie mein Kommentar setzen dort und deshalb hatte diese "thread global" Antwort zu schreiben)
Wie Galwegian erwähnt, px ist die zuverlässigste für Web-Typographie, wie alles, was Sie auf der Seite zu tun ist vor allem in Bezug auf einen Computermonitor angelegt. Das Problem mit absoluten Größen ist, dass einig Browser (IE) nicht Pixel-Wert-Elemente auf einer Web-Seite, so skaliert, wenn Sie versuchen, Zoom in / out, alles paßt mit Ausnahme der Elemente.
Ich weiß nicht, ob IE8 behandelt dies richtig, aber alle andere Browser-Hersteller Pixel verarbeiten ganz gut, und es ist immer noch eine Minderheit Fall, in dem ein Benutzer zu vergrößern braucht / Text (in diesem Textfeld auf SO vielleicht die Ausnahme) zu verringern. Wenn Sie wirklich schmutzig machen möchten, können Sie immer eine Javascript-Funktion hinzufügen, für die Herstellung Ihrer Textgröße größer und bieten eine „kleine“ / „größer“ -Taste, um den Benutzer.
Yahoo User Interface Library ( http://developer.yahoo.com/yui/ ) hat einen schönen Satz von Klassen Base CSS verwendet, um "spezifische Einstellungen" der Browser zurückgesetzt, so dass die Basis für die Website Anzeigen ist für alle (unterstützt) Browser.
Mit YUI man soll Prozentsätze verwenden.