JavaScript - font-family und line-height ändern

[kultursprung]

Hallo zusammen!

Ich habe eine Testseite, auf der dynamisch durch JavaScript 4 CSS Elemente geändert werden sollen.

Zwei von den vier funktionieren:

font-size und width

Zwei funktionieren nicht:

Line-height und font-family

D.h. funktioniert nicht ist nicht ganz korrekt. Sie funktionieren auf der h3 Überschrift „Was ist eigentlich lorem ipsum?“ (in grün etwa in der Mitte der Seite) aber nicht auf den p Tags.

  function mach(was) {
    document.getElementById("inhalt").style.width = was;
  }
  function schreib(was) {
    document.getElementById("inhalt").style.fontFamily = was;
  }
  function tu(was) {
    document.getElementById("inhalt").style.fontSize = was;
  }
  function gib(was) {
    document.getElementById("inhalt").style.lineHeight = was;
  }

Wenn ich das Stylesheet der Seite rausnehme, dann geht es. Es hängt also irgendwie damit zusammen. Nur wie, und wie rausfinden?

Beste Grüße Kultursprung

Hier die Testseite:

http://www.stichpunkt.de/css/zeilenbreite.html

[Gunnar Bittersmann]

@@kultursprung

Ich habe eine Testseite, auf der dynamisch durch JavaScript 4 CSS Elemente geändert werden sollen.

Du änderst 4 Eigenschaften eines Elements: des div mit der ID "inhalt".

Zwei von den vier funktionieren:

font-size und width

font-size gibst du für h3 und p in em an, also bezogen auf das Elternelement "inhalt". Wenn du bei diesem die Schriftgröße änderst, ändern sich also auch die (absoluten) Schriftgrößen bei h3 und p.

Für width machst du weder für h3 noch p Angaben; die sind also so breit wie das Elternelement "inhalt" jeweils ist.

Zwei funktionieren nicht:

Line-height und font-family

D.h. funktioniert nicht ist nicht ganz korrekt. Sie funktionieren auf der h3 Überschrift „Was ist eigentlich lorem ipsum?“ (in grün etwa in der Mitte der Seite) aber nicht auf den p Tags.

Für h3 wird im Stylesheet weder line-height noch font-family gesetzt, damit wird beides vom Elternelement "inhalt" geerbt. Änderungen bei diesem schlagen also auf h3 durch.

Anders bei p: dafür werden im Stylesheet line-height und font-family gesetzt. Es gelten also diese Werte, nicht die vom Elternelement "inhalt". Die kannst du ändern wie du willst, p behält seine eigenen.

Wenn ich das Stylesheet der Seite rausnehme, dann geht es.

Klar, dann erbst ja p auch die Werte vom Elternelement "inhalt".

* * *

Und noch eine nicht unwichtige Bemerkung: Es ist (so gut wie) nie sinnvoll, CSS-Eigenschaften direkt mit JavaScript zu ändern.

[kultursprung]

Vielen, vielen Dank fürs Analysieren und die Erläuterungen!!!

Ich habe aus der Stylesheet-Datei bei p font-family und line-height rausgenommen.

Und jetzt funktioniert es wie geschünscht (bis auf den ersten Absatz, bei dem p eine eigne Klasse hat. Aber das war zum testen).

Noch eins: p im Stylesheet hat nach wie vor das font-size Elemnet.

Heisst das jetzt, das font-size und line-height sich bezüglich Vererbung und Spezifität Unterschiedlich verhalten? Beide haben ja im Stylesheet em.

Beste Grüße Kultursprung

[kultursprung]

P.s.

Ist eigentlich die Einbettung des Fonts

@font-face {  
font-family:OpenSans;  
src: url(fonts/OpenSans-Regular.eot);  /* EOT for IE */
src: local("OpenSans"), url(fonts/OpenSans-Regular.ttf) format("truetype"); /* non-IE */  
} 

im Stylesheet korrekt.

Und ja, ich weissm das Stylesheet ist Kraut und Rüben. Ist seit Jahren gewachsen.

[Gunnar Bittersmann]

@@kultursprung

Ist eigentlich die Einbettung des Fonts

@font-face {  
font-family:OpenSans;  
src: url(fonts/OpenSans-Regular.eot);  /* EOT for IE */
src: local("OpenSans"), url(fonts/OpenSans-Regular.ttf) format("truetype"); /* non-IE */  
} 

im Stylesheet korrekt.

Open Sans hat wohl kaum jemand local installiert, so dass die local-Angabe wenig Sinn macht. Und falls doch, heißt die Schrift auf dem System dann vielleicht doch "Open Sans" mit Leerzeichen?

Die doppelte src-Angabe für Uralt-IEs sollte wohl nicht mehr nötig sein. Dann gab’s noch einen IE-Hack url(fonts/OpenSans-Regular.eot?#iefix) format("embedded-opentype"), aber auch auf den sollte man inzwischen verzichten können.

Ab IE 9 sollte das gehen:

@font-face {  
  font-family: OpenSans;  
  src: url(fonts/OpenSans-Regular.eot) format("embedded-opentype"),
       url(fonts/OpenSans-Regular.ttf) format("truetype");
}

Nach Möglichkeit solltest du aber nicht (Embedded) OpenType oder TrueType, sondern WOFF und WOFF2 für Webfonts einsetzten. Open Sans ist als WOFF nicht zu bekommen?

LLAP 🖖

[Gunnar Bittersmann]

@@kultursprung

Heisst das jetzt, das font-size und line-height sich bezüglich Vererbung und Spezifität Unterschiedlich verhalten? Beide haben ja im Stylesheet em.

Nein, beide Eigenschaften werden vererbt.

Der Bezug ist aber ein anderer: Die Angabe der Schriftgröße font-size: 2em (auch font-size: 200%) beziehen sich auf die Schriftgröße des Elternelements.

Der Zeilenabstand line-height: 2 (was dasselbe ist wie line-height: 2em und line-height: 200%) bezieht sich auf die Schriftgröße ebendieses Elements.

Spezifität hat nichts mit Eigenschaften zu tun, sondern mit Selektoren.

LLAP 🖖