CSS3 Tests: Text/Fonts

Tests of CSS3 Text and Font declarations.

CSS3 Typographical Declarations

If you look at the W3C Text Module you'll see that CSS3 brings a whole bunch of new typographical properties. Some of them are very complex with vague descriptions. If I'm not 100% sure how they're supposed to work, I can't test them. This is why not all of the declarations are tested. As for line-break, I'm not sure if it's worth testing: the W3C descriptions seems to vague. All h2s on this page (grey headers) should have a red shadow on them; if they do your browser supports text-shadow.

min/max-font-size

You should resize the text to test this. If you're viewing this in Mozilla or Opera press Ctrl + - to make it smaller and Ctrl + + to make it bigger. Span with font-size: 13px; and min-font-size: 10px; Span with font-size: 13px; and max-font-size: 16px;

Text Line Styles

I am so glad the W3C introcuced this. I use a replication of this in the H3s of my site. Now there's a standardized version. All lines in boxes below, if they're there, should extend halfway across the text.

This text should have a dashed line above it.
This has text-overline-style: dashed.

This text should have a dashed line below it.
text-underline-style: dashed.

This text should have a dashed line through it.
text-line-through-style: dashed.

Font Appearance

These new values for "font" include values according to the users computer, like font: status-bar would display a font exactly the same as the user's status bar font. See the spec for more details. The below text should look like your status bar. See for yourself.

Welcome to the CSS3 Tests Font Tests.

font-effect

This property can give certain effects to text. Possible values include emboss, engracve, and outline. The below text should appear like the image below it. If it does your browser supports font-effect.

engrave emboss outline
font-effect example image

Results

No browser supports any of this except for the Font Appearnces and text-shadow (Safari 1.1+), but that’s actually CSS2. Safari 1.2 doesn’t support the status-bar value for font-appearance.