Schriftgröße

Meiner Meinung nach war die Eigenschaft font-size einer der verwirrendsten Teile des CSS-Stils, um den Überblick zu behalten. Die Vielzahl der Möglichkeiten ist das Problem - in CSS erhalten Sie viele verschiedene Maßeinheiten, um die Größe Ihrer Schrift zu definieren. Aber welches ist das Beste? Ich bin nicht der Richter, welche Einheit die beste ist, aber ich habe eine Meinung darüber, welche Einheit Sie wählen sollten.

Schriftgröße - die em Maßeinheit

Das 'em' ist eine skalierbare Einheit, die speziell für Webmedien entwickelt wurde. Das 'em' wurde entwickelt, um die vom Benutzer voreingestellte Schriftgröße zu berücksichtigen. Dies bedeutet, dass 1em immer die vom Benutzer bevorzugte Schriftgröße ist. "Warum wollen Sie das?" könnte man fragen. Nun, viele Leute bevorzugen eine größere Schriftgröße aufgrund von Sehbehinderungen und wenn Sie versuchen, ihnen eine kleinere Schriftgröße aufzuzwingen, verlassen sie möglicherweise Ihre Site, ohne jemals einen einzigen Satz zu lesen. Wenn Sie also 1em als Standardschriftgröße verwenden, verbessern Sie wahrscheinlich die Benutzerfreundlichkeit für Benutzer mit Sehbehinderungen.

Aber warum verwenden nicht alle die EM-Messung, die Sie fragen könnten? Nun, es gibt zwei Probleme: Manche Leute bevorzugen pixelgenaue Layouts und dann eine flüssige Messung, da das em keine gute Wahl ist.

Wie groß ist ein Em?

Nach W3C ist ein em gleich dem berechneten Wert der Eigenschaft 'font-size' des Elements, für das es 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. ' Mit anderen Worten - ein Em hat keine feste Größe.

Darüber hinaus kann es schwierig sein festzustellen, wie groß ein 2em-Text ist, da die Messung skalierbar ist. Wenn der Benutzer keine Einstellungen zur Schriftgröße geändert hat, entspricht 1em normalerweise 16 Pixel und 2em 32 Pixel. Wenn Sie es gewohnt sind, Pixel bei der Definition Ihrer Schriftgröße zu verwenden, kann dies ein schwieriger Übergang sein. Hier ist ein Beispiel für die Skalierung der em-Einheit:

<style>
.textLarge {font-size: 2em;}
.textRegular{font-size:1em;}
.textSmall{font-size:0.7em;}
</style>
<p class="textLarge"> To travel is to live - H. C. Andersen </p>
<p class="textRegular"> To travel is to live - H. C. Andersen </p>
<p class="textSmall"> To travel is to live - H. C. Andersen </p>

Schriftgröße - die prozentuale Maßeinheit

Viele Leute wählen Prozentsätze, wenn sie die Größe ihrer Schrift definieren. Der Grund liegt auf der Hand: Wir alle kennen den Prozentsatz im Voraus und es ist leicht zu verstehen, dass eine Schrift der Größe '150%' um 50% größer ist als eine Schriftgröße '100%'.

Wenn Sie Prozentsätze als Maßeinheit verwenden, haben Sie zwei Möglichkeiten: Sie können die Schriftgröße im Verhältnis zu den Benutzereinstellungen festlegen. Dazu fügen Sie dem Body eine Deklaration hinzu:

body {font-size:100%;}

Wenn Sie dies tun, weisen Sie den Browser an, die vom Benutzer voreingestellte Schriftgröße als Standardschriftgröße zu verwenden. Anschließend können Sie den gesamten anderen Text entsprechend skalieren.

<style>
body {font-size:100%;}
h1 {font-size:170%;}
p {font-size: 130%}
.smallerText {font-size: 50%;}
</style>

<h1>The Perfume by Süskind</h1>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="smallerText">But they couldn't escape scent</span>.</p>
</style>

Die Schwierigkeit beim Skalieren - Elternelemente!

Sie müssen sich einer Sache bewusst sein! Beim Skalieren von Schriftgrößen skalieren Sie nach dem übergeordneten Element! Dies bedeutet, dass die aktuelle Schriftgröße beim Skalieren der nächsten Schriftgröße immer 100% entspricht. Lassen Sie uns ein Beispiel zeigen, warum dies zu einem Problem werden könnte:

<style>
body {font-size:100%;}
h1 {font-size:170%;}
p {font-size: 130%}
.smallerText {font-size: 50%;}
</style>

<h1>The Perfume by Süskind</h1>
<span class="smallerText">A short excerpt</span>.
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="smallerText">But they couldn't escape scent</span>.</p>

Wie Sie sehen, gibt es zwei Instanzen der Klasse 'smallText', und Sie würden davon ausgehen, dass sie dieselbe Größe haben, oder? Nun, leider funktioniert das nicht so. Das übergeordnete Element der ersten Instanz ist 'body', während das übergeordnete Element der zweiten Instanz das <p> Etikett ist. Das bedeutet, dass die erste Instanz auf 50% des Hauptteils skaliert wird, während die zweite Instanz auf 50% des Absatzes skaliert wird! Wenn Sie sich das Beispiel ansehen, sehen Sie sofort den Größenunterschied - die erste Instanz ist viel kleiner als die zweite.

TIPP!

Sie sollten sich darüber im Klaren sein, dass dieses Skalierungsproblem auch dann auftritt, wenn Sie ems anstelle von Prozentsätzen verwenden.

Schriftgröße - em vs Prozentsatz?

Welchen Wert sollten Sie wählen - Ems oder Prozentsätze? Nun, das liegt ganz bei Ihnen und hängt davon ab, welches Messsystem sich für Sie richtig anfühlt. Aber ich glaube, dass Sie mit beiden Einheiten herumspielen sollten, um beide Systeme kennenzulernen.

Was Sie gelernt haben:

• Das em-Messgerät ist speziell für den Webeinsatz konzipiert
• 2 ems ist doppelt so groß wie 1 em
• Viele Leute finden es einfacher, Prozentsätze zu verwenden, da dies eine Einheit ist, mit der wir vertraut sind - aber sie verhält sich genauso wie Ems!
• Unabhängig davon, ob Sie Ems oder Prozentsätze verwenden, skalieren Sie den Text basierend auf dem übergeordneten Element. Dies bedeutet, dass Sie, wenn Sie viele Elemente ineinander verschachtelt haben, vorsichtig vorgehen müssen, um das gewünschte Ergebnis zu erzielen