Zu klein: »font-family: monospace« in Safari

22.04.2009 in: Browser, CSS, Trickkiste und Typographie • 2 Kommentare

Denken wir uns ein ganz einfaches Dokument:

<!Doctype html>
<meta charset="utf-8">
<title>Test: monospace</title>
<style type="text/css">
body, pre 
    {
        font-size: 1em;
    }
pre
    {
        font-family: monospace;
    }
</style>
<p>Referenztext</p>
<pre>Ebenso groß?</pre>

Safari wird den Text im Element pre jetzt deutlich kleiner darstellen als alle anderen Browser. Denn die Webkit-Engine nimmt allein die interne Einstellung für Festbreitenschriften als Bezugsgröße, nicht die Größe des Elternelementes. Und die steht »ab Werk« eben bei 13px, 3 Pixel kleiner als die Normalgröße.

Die Lösung? Lügen.

pre,
code,
kbd,
samp,
var
    {
        font-family: Consolas, DejaVu Sans Mono, 
                     Bitstream Vera Sans Mono,
                     Inconsolata, Courier New, 
                     Andale Mono, serif;
    }

Ehe der Browser bei der generischen Schriftfamilie serif angekommen ist, hat er sehr sicher schon eine der angegebenen Schriften gefunden. Die generische Angabe hat somit nur einen Zweck: Sie hält Safari vom Kleinrendern des Textes ab. Einen speziellen Hack in einer separaten Regel können wir uns damit sparen.

2 Kommentare

defifee am 23.04.2010 · 18:26
Hey, das ist super und funktioniert. Ich hab ewig rumprobiert und gesucht und wollte monospace deswegen schon ganz aufgeben.
Eigentlich wär ich auch zu faul einen Kommentar zu schreiben, aber ich hab mich so gefreut, weil ich ursprünglich auch aus Halle bin:)
Thomas Scholz am 23.04.2010 · 18:46
@defifee: Oh, schön, daß sich mal jemand hierzu meldet. ☺

Eric Meyer hat das übrigens neulich auch erforscht; er empfiehlt:
```
font-family: "Courier New", monospace, serif;
```
Ich mag die Katze auf deiner Website.

← BOM entfernen (ï»¿) Designlinks 1 →

toscho.design

Zu klein: »font-family: monospace« in Safari

2 Kommentare