netinja: Problem mit der Schriteinheit "em"

Beitrag lesen

SELF-Forum

Problem mit der Schriteinheit "em"

netinja
– Informationen zu den Bewertungsregeln

Hallo,

Ich habe eine Frage zu der Schrifteinheit "em":
Bisher dachte ich immer, 1em wäre die Größe des großen "M" der jeweiligen Schriftfamilie, so steht es jedenfalls auf Ingos Site:

http://www.1ngo.de/web/em.html
Zitat:
|  em [...] des Buchstabens 'M' – entspricht der Gesamthöhe des Fonts  inkl. Leerräumen)

In meiner Testdatei (mit Win-XP, Firefox-3) ist das allerdings nicht der Fall. Für die  beiden gelben und roten Boxen ist jeweils die gleiche Breite in "em" deklariert worden.
Erwartet hätte ich nun, daß die erste Box mit "Times New Roman" kleiner ist, als die zweite Box mit "Courier New", was aber nicht der Fall ist.

Um es nun ganz genau zu testen, habe ich danach in die gelben Boxen jeweils 50 "M"s geschrieben. Die Breite der Boxen sollte demnach  50em betragen. Sie ist jedoch
1. viel geringer, und
2. unter verschiedenen Schriftarten dennoch wieder (optisch) gleich groß.

Kann mir bitte jemand erklären, was ich bei Ingos Artikel falsch verstanden habe?

liebe Grüsse
netinja

Hier ist meine Testdatei:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>em</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<style type="text/css">  
  
.box {  
   width: 37.5em;  
   background-color: #66FFCC;  
   border: 1px solid black;  
}  
  
.box-m {  
   width: 44.5em;  
   background-color: #FFC;  
   border: 1px solid black;  
}  
  
p span {  
   color: red;  
   font-weight: bold  }  
  
  
  
</style>  
</head>  
  
<body>  
  
  
  
<div class="box" style="font-family: 'Times New Roman';">  
    <p>Home_Grundschulen_Realschulen_Gymnasien_Abendschulen_Fachhochschulen_Volkshochschulen</p>  
</div>  
  
<br>  
<br>  
  
<div class="box" style="font-family: 'Courier New';">  
    <p>Home_Grundschulen_Realschulen_Gymnasien_Abendschulen_Fachhochschulen_Volkshochschulen</p>  
</div>  
  
<br>  
<br>  
  
<div class="box-m" style="font-family: 'Times New Roman';">  
    <p>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span></p>  
</div>  
  
<br>  
<br>  
  
<div class="box-m" style="font-family: 'Courier New';">  
    <p>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span>MMMMMMMMM<span>M</span></p>  
</div>  
  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln