CSS3 - Schriftformatierung

1. Na ja

Hier sieht es bei den Neuerungen ziemlich mau aus. Denn es gibt nur drei und von denen wird auch nur eine vernünftig unterstützt. Egal, jetzt habe ich schon einen kompletten Abschnitt dafür vorgesehen und präsentiere sie dann auch.

2. font-size-adjust

• 18.0
• 9.0/10.0

Das Problem

Man gibt bei font-family eine Sammlung von Schriftarten an. Ist die erste nicht verfügbar, so wird die zweite genommen und so weiter. Aber! Die Angabe einer Größe bezieht sich auch immer auf den Schriftschnitt. Und da kann es dann schon mal passieren, dass eine Ausweichschrift insgesamt kleiner wirkt, als die ursprünglich ausgewählte. Und hier kommt font-size-adjust ins Spiel. Denn das nimmt den so genannten Aspektwert der ersten Schrift und überträgt sie auf die anderen.

Die x-Höhe

... ist eigentlich was für Typographen und nennt sich auch Mittellänge. Ich versuche es mal auf meine laienhafte Art zu erklären. Also die x-Höhe ist die Größe eines Kleinbuchstabens, wenn der nicht nach unten oder oben ausreißt. Gilt also zum Beispiel für ein a oder e aber nicht für ein b oder g. Dazu ein kleines Bildchen.

Wie ihr sehen könnt, ist zum Beispiel das e in der ersten Schrift (Verdana) deutlich größer als in den beiden anderen (Bank Gothic Medium BT und Book Antiqua). Jetzt muss man nur den x-Wert der Verdana herausfinden und kann die Größe der anderen Schriften entsprechend beeinflussen. Also zum Beispiel so:

p {
  font-family: Verdana, Arial, Helevetica, sans-serif; 
  font-size-adjust: 0.58;
}

Wenn ihr mich fragt

.. ist das in den Zeiten von serverseitigen Schriften überflüssig wie ein Kropf(f). Darum verzichte ich auch auf ein Beispiel. Vielleicht wird die Browserunterstützung irgendwann besser und die Sache mit den serverseitigen Schriften kommt aus irgendeinem Grund zum Erliegen. Dann kann man es unter Umständen ganz gut gebrauchen.

3. font-stretch

• 9.0/10.0

Legt den Abstand der einzelnen Buchstaben fest. Erlaubt sind dabei folgende Werte.

• ultra-condensed
• condensed
• semi-condensed
• semi-expanded
• extra-expanded
• ultra-expanded
• narrower
• wider

Da auch hier die Browserunterstützung extrem mau ist, verzichte ich ebenfalls auf ein Beispiel. Wollte das nur mal erwähnen.

4. text-shadow

• 18.0
• 12.x
• 5.1
• 23.0
• 10.0

Erzählt um Gottes Willen niemals euren Designern davon. Denn wenn die davon Wind kriegen, wimmelt es bald nur so von Textschatten, dass einem die Augen aus dem Kopf fallen.

div.shadow p.one {
  font-size: 2em;
  text-shadow: 3px 3px 4px #000;
}
<div class="shadow">
  <p class="one">Bla blubb blubber</p>
</div>

WAHHHH! Ich bin blind!

Leider kann man nicht nur mit einem Schatten arbeiten, sondern auch mit mehreren. Dazu reiht man einfach die entsprechenden Angaben durch ein Komma getrennt aneinander. Also noch mal, niemals euren Designern erzählen! Und schon gar nicht den Hobby-Webentwicklern in eurem Bekanntenkreis. Denn sonst sieht das Internet bald wieder aus wie anno 1998.

div.shadow p.two {
  font-size: 2em;
  text-shadow:2px 2px 1px #f0f, 
              4px 4px 1px #00f,
              6px 6px 1px #f00,   
              8px 8px 1px #ff0;
}
<div class="shadow">
  <p class="two">Davon bekommt man Augenkrebs!</p>
</div>

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt