Frage

Wenn die Schriftgröße in CSS einstellen, soll ich mit einem Prozentwert (%) oder em sein? Können Sie den Vorteil erklären?

War es hilfreich?

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. ems 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.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top