toscho.design
Redaktion, Druck- und Webdesign aus Halle (Saale)

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

22.04.2009 in: Browser, CSS, Trickkiste und Typographie

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.

Was sagst du dazu?

Hinweise zum Datenschutz
Nur das ist Pflicht, der Rest … nicht. Kommentare mit 6 oder mehr Links prüfe ich erst. SEO-Namen, Links auf Partnerprogramme (Affiliate) und ähnlichen Spuk lösche ich.
Bitte maskiere < und > mit &lt; und &gt;, sonst werden sie gefressen.

←   →