Schriftgröße in CSS -% oder em?

112

Sollte ich beim Festlegen der Schriftgröße in CSS einen Prozentwert ( %) oder verwenden em? Können Sie den Vorteil erklären?

css fonts font-size

— Matten
quelle

1

Meiner Meinung nach gibt es 2016 keinen Unterschied zwischen em und%. Wenn ich 1,2 em eingebe, denken alle modernen Browser, dass ich 120% verwendet habe, und wenn ich zum Beispiel 0,7 em verwende, denken alle modernen Browser, dass ich 70% verwendet habe ... Dies ist, was ich in CSS erlebt habe

— Mahdi Jazini

79

Es gibt einen wirklich guten Artikel über Web-Typografie auf A List Apart .

Ihre Schlussfolgerung:

Es wurde gezeigt, dass die Größe von Text und Zeilenhöhe in ems mit einem auf dem Text angegebenen Prozentsatz (und einer optionalen Einschränkung für Safari 2) genauen, anpassbaren Text für alle heute gebräuchlichen Browser liefert. Dies ist eine Technik, die Sie in Ihre Kit-Tasche stecken und als Best Practice für die Größenänderung von Text in CSS verwenden können, die sowohl Designer als auch Leser zufriedenstellt.

— Glenn Slaven
quelle

29

Eigentlich line-heightssind besser ohne Einheiten überhaupt geschrieben. Dies wird durch die Spezifikation erlaubt, und vermeidet ganz sicher wirklich ärgerlich Macken Browser , wenn es um em-basierte Line-Höhen

— Már Örlygsson

16

Ich möchte die Leute darauf aufmerksam machen, dass dieser Artikel aus dem Jahr 2007 stammt. Seitdem sind moderne Browser häufiger geworden, und moderne Browser zoomen normalerweise hinein, anstatt standardmäßig die Schriftgröße zu erhöhen. Aus diesem Grund ist 'px' häufiger geworden und meiner Meinung nach ein besserer Ansatz. Natürlich ist das umstritten, aber ich persönlich bin auf Probleme in Projekten gestoßen, weil ich sie verschachtelt habe.

— Mohag519

5

@ Mohag519 Das Verschachteln von Ems ist eine gefährliche Falle. :)

— Vishnudev K

@ Mohag519 wird px Ihnen nicht etwas viel Kleineres als beabsichtigt mit mobilen Geräten geben, die jedoch eine hohe Pixeldichte haben? Ich denke nicht, dass wir wollen, dass unsere Websites genau wie Desktop sind, aber auf Mobilgeräten sehr klein;)

— johnb003

@ johnb003 Solche mobilen Geräte haben ein Gerätepixel - Verhältnis größer als 1. Das iPhone 4 hat beispielsweise eine physische Bildschirmbreite von 640 Pixel, wird jedoch als 320 "CSS" -Pixel angezeigt (DPR = 2). Die Website erscheint also nicht kleiner!

— Benjamin

14

Von http://archivist.incutio.com/viewlist/css-discuss/1408

%: Einige Browser verarbeiten Prozent nicht für die Schriftgröße, sondern interpretieren 150% als 150px. (Einige NN4-Versionen zum Beispiel.) IE hat auch Probleme mit Prozent auf verschachtelten Elementen. Es scheint, dass der IE Prozent relativ zum Ansichtsfenster anstelle relativ zum übergeordneten Element verwendet. Ein weiteres Problem (obwohl gemäß den W3C-Spezifikationen korrekt): In Moz / Ns6 können Sie keinen Prozentsatz relativ zu Elementen ohne angegebene Höhe / Breite verwenden.

em: Manchmal verwenden Browser die falsche Referenzgröße, aber von den relativen Einheiten ist es die mit den geringsten Problemen. Es kann jedoch vorkommen, dass es manchmal als px interpretiert wird.

pt: Unterscheidet sich stark zwischen den Auflösungen und sollte nicht für die Anzeige verwendet werden. Es ist jedoch ziemlich sicher für den Druckgebrauch.

px: Die einzige zuverlässige absolute Einheit auf dem Bildschirm. Es könnte jedoch im Druck falsch interpretiert werden, da ein Punkt normalerweise aus mehreren Pixeln besteht und somit alles lächerlich klein wird.

— Galwegisch
quelle

Über die pt-Sache. Ich hatte ein tolles Argument für /. darüber (und verloren). Ich hatte den gleichen Standpunkt wie Sie, gut zu wissen, dass jemand diese POV teilt :)

— Vincent McNabb

12

Wollen Sie damit wirklich sagen, dass einige Benutzer von Netscape Navigator 4 meine Seite möglicherweise nicht richtig anzeigen können, wenn ich Prozentsätze für Schriftgrößen verwende?

— Neuling

4

Die zitierte Diskussion stammt aus dem Jahr 2002. Ist dies noch relevant? Gibt es Browser, die mit em oder% bugs aktiv verwendet werden?

— Beni Cherniavsky-Paskin

1

Das Zitieren von 20 Jahre alten Fehlern in Browsern ist keine nützliche Antwort.

— d512

7

Beide passen die Schriftgröße relativ zu ihrer Größe an. 1,5 em entspricht 150%. Der einzige Vorteil scheint die Lesbarkeit zu sein. Wählen Sie diejenige, mit der Sie sich am wohlsten fühlen.

— Liam
quelle

Kann mir jemand erklären, warum dies abgelehnt wird? Genau so habe ich den Unterschied zwischen em & Prozentsatz verstanden. Es gibt heutzutage keinen Vorteil, einen über den anderen zu verwenden. Wichtig ist, dass Sie eine Größe verwenden, die relativ zu einer Basisschriftgröße ist.

— Lee Theobald

1

Danke Lee, ich habe das gerade in IE6, IE7, Firefox 3, Safari 3, Opera 9.5 und Google Chrome unter Windows getestet und sie scheinen mir alle gleich zu sein! <p style = "font-size: 0.6em;"> dies ist ein Test </ p> <p style = "font-size: 60%;"> dies ist ein Test </ p>

— Liam

7

Der wirkliche Unterschied wird deutlich, wenn Sie es nicht für Schriftgrößen verwenden. Das Einstellen eines paddingvon 1emist nicht dasselbe wie 100%. emist immer relativ zur Schriftgröße. Aber %möglicherweise relativ zu Schriftgröße, Breite, Höhe und wahrscheinlich einigen anderen Dingen, die ich nicht kenne.

— Björn Tantau
quelle

5

Angesichts der Tatsache, dass (fast?) Alle Browser jetzt die Größe der gesamten Seite und nicht nur des Texts ändern, haben frühere Probleme mit pxvs. %vs.em s in Bezug auf die Größenänderung zugänglicher Schriftarten eher umstritten.

Die Antwort ist also, dass es wahrscheinlich keine Rolle spielt. Verwenden Sie, was auch immer für Sie funktioniert.

% ist schön, weil es eine relative Größenänderung ermöglicht.

px ist schön, weil es ziemlich einfach ist, die Erwartungen bei der Verwendung zu verwalten.

em kann nützlich sein, wenn es auch für Layoutelemente verwendet wird, da es eine proportionale Größe in Bezug auf die Textgröße ermöglichen kann.

— DA.
quelle

Irreführende Antwort, insbesondere für diejenigen, die überhaupt nicht viel über CSS wissen. Abgesehen von der Tatsache, dass CSS logische Pixel definiert, was eine schreckliche Idee war, die auf einer zweifellos hastigen Entscheidung beruhte, dem Ansturm von CSS-fähigen Mobilgeräten vor einem Jahrzehnt Rechnung zu tragen, liegen Pixel in Bezug auf die Standardschriftgröße ganz im Ermessen von Browsern und Benutzern , wenigstens. Darüber hinaus haben wir jetzt sehr unterschiedliche Bildseitenverhältnisse (und nicht immer Geräte mit Bildschirm) und Auflösungen von 240p bis 2400p. Die Verwendung von Pixeln in CSS ohne JavaScript ist nahezu nutzlos.

— Amn

@amn gut, beachte, dass diese Antwort 8 Jahre alt ist. Das ist eine lange Zeit in der Internetzeit. Das heißt, Pixel sind immer noch in Ordnung, wenn nicht ideal. Die meisten (alle?) Browser bieten eine angemessene Größe der Pixelschrift auf dem jeweiligen Gerät. Heute würde ich normalerweise Rem als meine Maßeinheit verwenden.

— DA.

Vielleicht fehlt mir etwas, aber welchen Nutzen hat man bei Pixellängen? Warum sind sie "gut" oder "ideal"? Versus em, zum Beispiel. Abgesehen davon denke ich, dass Antworten auf SO zeitlos sein sollten - es ist schließlich eine Wissensbasis. Wikipedia der Programmierung :) Da Wikipedia aktualisiert wird, um Fakten widerzuspiegeln, sollte SO meiner bescheidenen Meinung nach auch antworten.

— Amn

@amn Ich habe nicht gesagt, dass sie ideal sind oder einen wirklich großen Nutzen haben. Ich habe gerade die OP-Frage beantwortet. Wenn Sie die Zukunft des Webs in 8 Jahren vorhersagen können, haben Sie mehr Kraft! Aber ich habe nicht die Zeit, meine Antworten hier im Wert von einem Jahrzehnt ständig zu aktualisieren. Hoffentlich wissen die Leute genug, um sich die Zeitstempel der Antworten anzusehen und dies zu berücksichtigen.

— DA.

0

In Bezug auf den Unterschied zwischen den CSS-Einheiten %und em.

Soweit ich verstehen (zumindest theoretisch / konzeptionell, aber möglicherweise nicht , wie diese beiden Einheiten können in Browsern implementiert werden) diese beiden Einheiten äquivalent sind, dh , wenn Sie multiplizieren Ihr emWert mit 100und ersetzen Sie dann emmit% ihm sollte das gleiche sein?

Wenn es tatsächlich einen echten Unterschied zwischen em und% gibt, kann jemand dies erklären (oder einen Link zu einer Erklärung bereitstellen)?

(Ich wollte meinen Kommentar dort hinzufügen, wo er hingehört, dh direkt unter der Antwort von eingerückt "Liam, answered Sep 25 '08 at 11:21" meinen Kommentar dort da ich auch wissen möchte, warum seine Antwort abgelehnt wurde, aber ich konnte nicht herausfinden, wie ich meinen Kommentar dort platzieren sollte, und musste daher schreiben diese "thread global" Antwort)

— user743436
quelle

-1

Wie Galwegian erwähnt, ist px für die Web-Typografie am zuverlässigsten, da alles andere, was Sie auf der Seite tun, hauptsächlich in Bezug auf einen Computermonitor dargestellt wird. Das Problem bei absoluten Größen besteht darin, dass einige Browser (IE) Pixelwertelemente auf einer Webseite nicht skalieren. Wenn Sie also versuchen, hinein- / herauszuzoomen, wird alles außer diesen Elementen angepasst.

Ich weiß nicht, ob IE8 dies richtig handhabt, aber alle anderen Browser-Anbieter behandeln Pixel einwandfrei und es ist immer noch eine Minderheit, in der ein Benutzer Text vergrößern / verkleinern muss (dieses Textfeld auf SO ist möglicherweise die Ausnahme). Wenn Sie wirklich schmutzig werden möchten, können Sie jederzeit eine Javascript-Funktion hinzufügen, um Ihren Text zu vergrößern, und dem Benutzer eine Schaltfläche "klein" / "größer" anbieten.

— Christian P.
quelle

1

IE7 skaliert Pixelwerte gut, wenn Sie Zoom verwenden. IE6 hatte keinen Zoom, nur Textgröße. Der Zoom wurde zu einer Anforderung, da Designer feste Pixelskalen verwendeten, anstatt die Seite mit Änderungen der Textgröße neu fließen zu lassen.

— Mike Dimmick

Es ist immer noch ein Problem mit IE6, aber andererseits ist ALLES immer noch ein Problem mit IE6. Während ich in der Vergangenheit aus diesem Grund px vermieden habe, ist das Konzept des Zooms von Webseiten als Ganzes (im Vergleich zum Text) zum Standard geworden, und ich habe festgestellt, dass ich px viel häufiger verwende.

— DA.

-1

Die Yahoo-Benutzeroberflächenbibliothek ( http://developer.yahoo.com/yui/ ) verfügt über eine Reihe von Basis-CSS-Klassen, mit denen die browserspezifischen Einstellungen "zurückgesetzt" werden, sodass die Basis für die Anzeige der Website für alle gleich ist (unterstützt). Browser.

Mit YUI soll man Prozentsätze verwenden.

— kosoant
quelle

Ich habe den YUI-Reset verwendet, aber dann festgestellt, dass die Einstellungen für die Textgröße des Browsers NICHT funktionieren! Es macht keinen Sinn,% zu verwenden, wenn Sie px für den Body festgelegt haben, da dies die Einstellungen für die Textgröße beeinträchtigt.

— Jason