This page illustrates a minor font rendering bug in Safari through version 1.2. If you use CSS to specify the font-family of an element and its font-style as italic, and if the font chosen does not have an explicit italic version, then the original default font will be used instead of a pseudo-italic version or a non-italicized version.

Though perhaps not technically wrong--the CSS specs do not specifically define what should happen when a non-existant font combination is specified, but seem give enough leeway that not creating pseudo-fonts is an acceptable interpretation--it is not the expected behavior, and is not the way that Mozilla, IE Mac, or even iCab behave (all render the text as pseudo-italic).

Consistency problems aside, this is what I don't like: it can affect a page despite no mistake (specifiying italics on a font that has no italic version, for example) being made by the page designer.

One scenario: A designer does not specify a default font for the page, but uses italic text for emphasis (or acronym tags). The user, to make things easier to read, has specified a somewhat unsual default font that happens to not have an italic version. The viewer goes to the page, and instead of seeing pseudo-italicized text in their font of choice, Safari goes to an italicized version of its default font. This preserves the emphasis, but can cause funny-looking text through no fault of the designer.


A simple H3 Header, generic Cursive styled

This is the worst case scenario; since Safari's default cursive font has no bold version, and the default of a header is to bold, if you style a header as cursive without specifically specifying non-bold text, you'll get the fallback block text.

CSS Used: h3 { font-family: cursive; }


Some text in Comic Sans, Italic (kills the font).

CSS Used: p.broken { font-family: "Comic Sans MS", cursive; color: #990000; background-color: transparent; font-style: italic; }


Some text in generic cursive, Italic (also breaks the font--this text isn't cursive, at least when the default cursive font has no italic version).

CSS Used: p.brokentoo { font-family: cursive; color: #990000; background-color: transparent; font-style: italic; }


Some text in Comic Sans, not italic (works great, except for an acronym tag).

CSS Used: p.ok { font-family: "Comic Sans MS", cursive; color: #990000; background-color: transparent; }


Some text in generic cursive, not italic (also works great).

CSS Used: p.alsook { font-family: cursive; color: #990000; background-color: transparent; }


Some text in Times, which has an Italic version (works).

CSS Used: p.different { font-family: "Times", serif; color: #990000; background-color: transparent; font-style: italic; }


The stylesheet used by this page