font: em und %

[Jens Hoffmann]

Hallo Ihr
Ich würde gerne mal wissen, was der genaue Unterschied einer %-Angabe und einer em-Angabe für die Schriftgröße ist. Ich habe bisher leider noch kein Voll-Durchblick-Erlebnis gehabt:

Wie benutze ich diese Angaben, um CSS zu definieren, so dass die "normale" Schriftgröße (für Fliesstext) gleich der Größe in den Prefs des Browsers ist und was ist dann der Unterschied zw. em und %?

Wo muss ich aufpassen? Was ist z.B. mit Abständen? Muss ich diese auch in em/% angeben oder kann es da Situationen geben, wo eine px-Angabe Ärger bringt?

Danke und Grüße, Jens

[frank_eee]

re:Hi,

Ich würde gerne mal wissen, was der genaue Unterschied einer %-Angabe und einer em-Angabe für die Schriftgröße ist.

100% = 1em;
ein em ist genau eine Zeile hoch. Schau mal unter http://www.jan-winkler.de/hw/program/css_9.htm#units-per-em nach, da wird em erklaert.

Wie benutze ich diese Angaben, um CSS zu definieren, so dass die "normale" Schriftgröße (für Fliesstext) gleich der Größe in den Prefs des Browsers ist

Schreibe nichts hin und der Browserstandard wird uebernommen ...

»»und was ist dann der Unterschied zw. em und %?
Prozent beschreibt eben Prozent und em ist eine selbstdefinierte Einheit (kannst du umdefinieren) ...

Wo muss ich aufpassen?

Bei den Browsern wuerde ich sagen: nicht alle koennen alles bzw. richtig ...

»»Was ist z.B. mit Abständen? Muss ich diese auch in em/% angeben oder kann es da Situationen geben, wo eine px-Angabe Ärger bringt?
Der Vorteil bei Prozenten ist, dass der Bereich sich an die Aufloesung anpasst - dagegen ist der Vorteil bei festen Werten (also Pixel) dass der Bereich sich eben nicht anpasst ...

gruss zurueck,
frank_eee.

[Bernhard Peissl]

Hi!

Der Vorteil bei Prozenten ist, dass der Bereich sich an die Aufloesung anpasst - dagegen ist der Vorteil bei festen Werten (also Pixel) dass der Bereich sich eben nicht anpasst ...

Und der nachteil ist, bei verschachtelten Tags wird der Prozentsatz immer doppelt angewendet:

z.b: ul { font-size: 90%; }

<ul>
 <li>
  <ul><li>Text</li></ul>
 </li>
</ul>

Text ist dann bei einer standardschriftgrösse von 12px 12.0,9*0,9=9,71 Pixel gross (90% von 90% von 12px) anstatt nur 10,8 Pixel (90% von 12px). Hab bis jetzt noch keine Möglichkeit gefunden, das für _alle_ Browser zu umgehen!

Aber wenns jemand von euch schon geschafft hat (oder wenns mit em funktioniert), dann sagt mirs bitte ;-)

lg bernhard

[frank_eee]

re:Hi,

"Hab bis jetzt noch keine Möglichkeit gefunden, das für _alle_ Browser zu umgehen!"

Mit em klappt's (oder eben Pixel nehmen) - weil 0.9 em immer gleich 0.9 em und nicht 90% von 90% ...

gruss,
frank_eee.

[Thomas J.S.]

Hallo,

Ich würde gerne mal wissen, was der genaue Unterschied einer %-Angabe und einer em-Angabe für die Schriftgröße ist. Ich habe bisher leider noch kein Voll-Durchblick-Erlebnis gehabt:

% ist immer relative zu anderen definiereten angeben (höhe, breite etc.), wobei diese andere angabe eine eigenschaft des elements selbst oder des elternelements sein kann.
z.B:
div { font-size:10pt; }
th { font-size:15px; }
p { font-size:120%; }

sofern sich ein <p> in einem <div> befindet ist die größe der schrift im <p> 12pt (und nicht 120% !)
wenn ein <p> in einem <th> steht ist die schriftgröße im <p> 18px

wenn jetzt (wobei dies nicht richtig ist) ein <p> im <p> steht kann die schrfitgröße hier 14.4pt oder 21/22px (da 0.6px nicht gibt) betragen.

diese vererbung ist auch der grund für bernhards problem mit verschachtelten listen.

---

em  bezieht sich immer auf die errechnete größe des elements schriftart (errechnet wird z.B. vom browser)
wenn man aber em direkt in font-size verwendet gilt als ausgangsbasis für die errechnung die schriftgröße des elternelements.

z.B:
div { line-height:1.5em }
heisst, dass die zeilenhöhe 1,5x größer ist als die größe des schriftes im <div>

div { font-size:10pt; }
p { font-size:0.8em; }

die schriftgröße im <p> wenn <p> im <div> liegt beträgt 8pt.

Wo muss ich aufpassen? Was ist z.B. mit Abständen? Muss ich diese auch in em/% angeben oder kann es da Situationen geben, wo eine px-Angabe Ärger bringt?

für die bildschirmdarstellung kannst ruhig pixel nehmen.

grüße
thomas

[Bernhard Peissl]

Hallo Thomas!

% ist immer relative zu anderen definiereten angeben (höhe, breite etc.), wobei diese andere angabe eine eigenschaft des elements selbst oder des elternelements sein kann.

em  bezieht sich immer auf die errechnete größe des elements schriftart (errechnet wird z.B. vom browser)
wenn man aber em direkt in font-size verwendet gilt als ausgangsbasis für die errechnung die schriftgröße des elternelements.

Der Effekt ist also der Gleiche, wenn ich das richtig verstanden hab. ob jetzt 90 mit % hinten oder 1/90 mit em hinten steht is egal, es wird immer vom parentelement aus berechnet ?! Das gibts ja nicht, dass ich der einzige Schlauberger bin, der seine Listen verschachtelt, aber trotzdem relative Angaben machen will!

Sofern man sich konsequent an die Standards hält, und jeden Text schön in ein <p> einbettet, und dieses laut Spezifikation auch nicht in andere Blocklevelelemente einbettet -- ein häufig gemachter Fehler hab ich mal gehört ;-) -- müsste es eigentlich funktionieren. An den <ul> scheiden sich dann allerdings die Geister ! Denn bei ihnen isses schliesslich erlaubt, sie zu verschachteln.

Warum tu ich mir das überhaupt an? Ich möchte einerseits dass man die Schrift in der "standardgrösse" 10pt (Standard im Sinne von am häufigsten im Web antreffbar) am Schirm hat, aber trotzdem die Schriftgrade im Browser grösser/kleiner stellen kann. Aber die Default-Browser schrift ist mir zu gross.

lg Bernhard
*Ritter der Witwen und Weisen* ;-)