wake-up-neo.com

Was ist die Einheit für die Schriftgröße? Wie viel ist es in Pixel?

Ich möchte wissen, was die Einheit em ist und wie viel 1em ist, wenn es in Pixel (px) konvertiert wird. Ich habe auch irgendwo über einen IE Bug gelesen, um zu überwinden, welche Body-Schriftgröße auf etwas gesetzt werden soll, aber nicht viel folgen kann. Kann jemand das im Detail erklären?

36
sushil bharwani

Ungeachtet dessen, was Sie an anderer Stelle lesen, gibt es keine direkte Beziehung zwischen em und px.

Wie einer der Links sagt:

der "em" -Wert basiert auf der Breite des Großbuchstabens M

Es wird also für jede Schriftart anders sein. Eine schmale Schrift hat möglicherweise die gleiche Höhe (in Pixel) wie eine erweiterte Schrift, die Größe der Schrift ist jedoch unterschiedlich.

drei Jahre später BEARBEITEN:

Es gibt jetzt viele Quellen, die besagen, dass 1em = Schriftgröße (in px). Das heißt, wenn Sie schreiben font-size:16px, dann 1em = 16px. Dies stimmt immer noch nicht mit der Adobe-Quelle überein (die besagt, dass 1em = die Schriftgröße in pt ist), aber in beiden Fällen scheint es bizarr. die em-größe wäre bei komprimierten schriftarten viel zu groß und bei erweiterten schriftarten viel zu klein.

Ich mache ein paar Testseiten und überzeuge mich.

und auch:

Ich sehe, dass niemand (einschließlich ich) tatsächlich die Frage beantwortet hat (was irgendwie verborgen war):

Ich habe auch irgendwo etwas über Bugs gelesen und um die eingestellte Schriftgröße zu überwinden

Laut diese Seite müssen Sie dies zu Ihrer CSS hinzufügen: html{ font-size:100%; }. Diese Seite ist sechs Jahre alt und ich habe die (Hunderte) Kommentare nicht gelesen, daher weiß ich nicht, ob sie noch relevant sind.

38
egrunin

Das M-Prinzip, dass ein Em auf dem Buchstaben M basiert und von der Schriftart abhängt, ist ein oft genannter Mythos !! W3c em documentation beschreibt sehr genau, wie ems und Pixel zusammenhängen. Das Verwenden des Buchstabens M zum Berechnen von Schriftgrößen ist zumindest zu kompliziert und unnötig.

Die Einheit 'em' entspricht dem berechneten Wert der Eigenschaft 'font-size' des Elements, für das sie verwendet wird. Die Ausnahme ist, wenn 'em' im Wert der Eigenschaft 'font-size' selbst vorkommt. In diesem Fall bezieht sie sich auf die Schriftgröße des übergeordneten Elements. Es kann für vertikale oder horizontale Messungen verwendet werden.

Hier sind die wichtigsten Punkte.

  1. Ohne Ahnenvergrößerung entspricht 1em genau dem Pixel-Schriftgrößenattribut.

  2. Die Ahnenvergrößerung mit x-ems oder x-prozent bedeutet, dass Sie nur mit den offensichtlichen Verhältnissen x oder x/100 multiplizieren. So berechnet eine einfache Java-Skript-Schleife die exakten Schriftgrößen, vorausgesetzt: (1) kein C.S.S, um Java-Skript zu vereiteln; und (2) bei einigen Vorfahren ist die Schriftgröße in absoluten Einheiten festgelegt. Dies ist der berechnete Wert, über den die Dokumentation spricht. Eine Handberechnung kann sich um C.S.S. bewegen, es muss jedoch noch eine absolute Einheit in der Ahnenkette gefunden werden.

  3. Da ems die Breite misst, können Sie immer die exakte Schriftgröße berechnen, indem Sie einen Teilwert von 1000 ems erstellen und die Eigenschaft client-Width durch 1000 dividieren. Da ems auf das nächste Tausendstel gerundet werden, benötigen Sie 1000 ems, um fehlerhafte Pixelkürzungen zu vermeiden.

  4. Sie können wahrscheinlich eine Schriftart erstellen, bei der das M-Prinzip nicht funktioniert, da em auf dem Schriftgrößenattribut und nicht auf der tatsächlichen Schriftart basiert. Angenommen, Sie haben eine seltsame Schriftart, bei der M 1/3 der Größe der anderen Zeichen beträgt, und Sie haben eine Schriftgröße von 10 Pixel. Denken Sie nicht, dass die Pixel-Schriftgröße in irgendeiner Weise die maximale Zeichenhöhe garantiert und das M daher nicht 10 Pixel und alle anderen Zeichen 30 Pixel beträgt?

Warnung

  1. Eine wichtige Einschränkung zu (2) ist, dass das relative Verhältnis der ex-Einheit sehr instabil ist. Im selben Browser mit konstanter Schriftart kann sich das relative Verhältnis mit der Schriftgröße ändern. Das relative Verhältnis von ex ändert sich auch mit dem Browser, selbst wenn die Schriftgröße und die browsersichere Schriftart identisch sind, wie beispielsweise Georgia. Dies ist ein guter Grund, das Ex-Gerät nicht zu verwenden, wenn Sie Konformität wünschen. Wenn die Ex-Einheit verwendet wird, ist es unmöglich, die Schriftgröße über die Ahnenkette zu berechnen.
18
Mark Willis

Es wird aus der Schriftgröße Ihres Körpers berechnet. Sie können einen Pixel-zu-Em-Konverter verwenden, um genau herauszufinden, was sich auf Ihrer Website befindet.

PxToEm

5
TALLBOY

em ist ein Maß, das ursprünglich in gedruckter Typografie verwendet wurde (gemäß Wikipedia). Hier sind einige Dinge zu beachten: Wenn em als 12pt-Typ definiert ist, entspricht ein em 12/72 Zoll einer gedruckten Seite; Wenn Sie ein Em jedoch als 16px definieren, hängt seine Breite in Zoll von der Auflösung des Mediums ab. (Hinweis: Die Auflösung von 72ppi bis 120ppi galt vor dem Aufkommen von Mobilgeräten als "sicherer Browser" -Standard.) Wenn Ihre Benutzer also ein Gerät mit einer Breite von 300px verwenden, bedeutet 1em als 16px viel "Immobilien". Die beste Verwendung von EM-Messungen besteht meiner Meinung nach darin, Absätze von Texten zu definieren, um den Leerraum effektiv auszugleichen, nicht für das Seitenlayout oder die Positionierung.

4
Hap Jewell

Die nach dem Buchstaben "M" benannte em-Einheit hat eine lange Tradition in der Typografie, in der horizontale Breiten gemessen wurden. Beispielsweise wird der lange Bindestrich, der häufig in amerikanischen Texten (-) vorkommt, als "em-dash" bezeichnet, da er historisch die gleiche Breite wie der Buchstabe "M" hatte. Sein engerer Cousin (-), der in europäischen Texten häufig vorkommt, wird ebenfalls als "en-dash" bezeichnet.

Die Bedeutung von "em" hat sich im Laufe der Jahre geändert. Nicht alle Schriftarten haben den Buchstaben "M" (z. B. Chinesisch), aber alle Schriftarten haben eine Höhe. Der Begriff bedeutet daher die Höhe der Schrift - nicht die Breite des Buchstabens "M".

Aus "The amazing em unit und andere Best Practices" https://www.w3.org/WAI/GL/css2em.htm

3
John Doe

EM ist eine Maßeinheit, die proportional zur Punktgröße einer Schriftart ist.

2
simshaun

dieser Link kann Ihnen helfen http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Wie aus diesem Artikel zitiert:

Wir wissen, dass 1em immer der Schriftgröße des übergeordneten Elements entspricht. Deshalb:

1 ÷ parent font-size × required pixel value = em value

Für Ihre Lesezeichen: mrechnungstabelle von Pixel zu Ems für Schriftgrößen.

2
leivajd

em entspricht fast dem Prozentsatz, ich empfehle http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

1
Tom Vervoort