CSS/Eigenschaften/Schriftformatierung/font-size

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Schriftformatierung(Weitergeleitet von Font-size)
Wechseln zu: Navigation, Suche

Die Eigenschaft font-size bestimmt den Schriftgrad, das heißt die Darstellungsgröße der Schrift.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Erlaubt ist eine numerische Angabe. Auch relative Angaben wie em, rem, ex oder % sind erlaubt. Relative Angaben beziehen sich auf die Schriftgröße des Elternelements.

Hinweis

Für die Ausgabe auf dem Bildschirm sind vor allem relative Einheiten wie em, rem, ex, Prozentwerte oder Schlüsselworte geeignet; absolute Einheiten wie pt, cm usw. sollten Drucklayouts vorbehalten sein.

Alternativ zu numerischen Angaben sind auch absolute und relative Schlüsselwörter möglich.

  • absolute Angaben
    • xx-small, winzig
    • x-small, sehr klein
    • small, klein
    • medium, mittel
    • large, groß
    • x-large, sehr groß
    • xx-large, riesig
  • relative Angaben
    • smaller, kleiner als im Elternelement
    • larger, größer als im Elternelement
    • inherit, Schriftgröße des Elternelements
Beachten Sie: Eine für ein Element festgelegte Schriftgröße wird ohne Ihr Zutun an die Kindelemente vererbt.

Anwendungsbeispiele[Bearbeiten]

Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>font-size</title>
    <style>
      h2 { font-size: 48px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }
    </style>
  </head>
  <body>
    <h1>Schriftgrößen mit font-size</h1>
    <h2>Erlaubte Werte</h2>
    <p>Es ist empfehlenswert, die Unterschiede zwischen
      <a href="http://wiki.selfhtml.org/...">absoluten</a>
      und <a href="http://wiki.selfhtml.org/...">relativen</a>
      Längenmaßen zu kennen.
    </p>
  </body>
</html>
Beachten Sie: Angaben in em beziehen sich immer auf die Schriftgröße des Elternelements und damit letztlich (bei durchgehender Verwendung) auf die Defaultschriftgröße des Gerätes. Nutzen Sie für Schriftgrößen besser nicht die Einheit px. Auch die Einheit cm sollte in Bildschirmlayouts keine Verwendung finden.

Kurzschreibweise[Bearbeiten]

Sie können die Angabe zur Schriftgröße mit der Angabe zur Zeilenhöhe kombinieren, indem Sie beide Angaben innerhalb der Eigenschaft font mit der folgenden Syntax notieren:

Beispiel
p {font: 1.2em/1.5 serif;}
p {font: 1.2em/150% serif;}
p {font: 1.2em/1.8em serif;}
Alle Angaben sind gleichwertig, eine Berechnung des gewünschten absoluten Wertes wie im 3. Fall ist also nicht notwendig.

Bei dieser Notationsweise bezeichnet der Wert vor dem Schrägstrich stets die Schriftgröße und der Wert hinter dem Schrägstrich stets die line-height (Zeilenhöhe). Eine Prozentangabe für die Zeilenhöhe bezieht sich dabei auf den Wert der Schriftgröße.

Beachten Sie: Die Angabe der Schriftart ist notwendig. Genauere Angaben zur Zusammenfassung von font-Eigenschaften finden Sie unter font.

Angabe einer Standardschriftgröße[Bearbeiten]

In älteren Codebeispielen finden sich teilweise noch Angaben wie

body { font-size: 100.1%; }  

Eine solche Angabe wurde für den IE 6, der krumme Wert für einen Bug in alten Versionen des Safari und Opera benötigt.

Heutzutage wird ohne Angabe einer Standardschriftgröße der Defaultwert medium, der 100% entspricht, verwendet und von den Browsern problemlos dargestellt.

Spezifizierung von "absoluten Größenangaben" xx-small etc[Bearbeiten]

Wie groß ist denn eine Größenangabe wie xx-small, bzw. wie unterscheiden sich da die Umsetzungen zwischen den Browsern?[1]

Beachten Sie: Die meisten™ Internetnutzer schrauben nicht an den Browsereinstellungen zur Schriftgröße herum. Wer es tut, legt aber eventuell auch eine Mindestschriftgröße fest, womit bestimmte Festlegungen eine für den Autor unerwartete Ausgabe generieren könnten. Deshalb ist eine Tabelle mit Maßen, wie es aussehen könnte, eher irreführend.
Empfehlung: Verwenden Sie für die Schriftgröße relative Maße wie rem oder em.


Quellen[Bearbeiten]

  1. forum.selfhtml.org: Spezifizierung von absoluten Größenangaben xx-small etc

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]