SPICING UP YOUR FONTS AND TEXT - Practical CSS3: Develop and Design - page 86

CSS3 TEXT WRANGLING

Now that you've gone through @font-face in some detail, including cross-browser
support and mitigation of potential problems, and looked at commercial and free
font supply options, let's have even more fun and look at some of the rather cool
text effects CSS3 offers. (I'll cover the CSS3 typography details at the end of the
chapter, because typography is a bit more experimental and cutting edge.) Table 3.2
shows the browser-supported CSS3 text features.

TAB LE 3.2 Browser Support Matrix for CSS3 Text Features

BROWSER TEXT-SHADOW TEXT-OVERFLOW WORD-WRAP HYPHENATE

Opera Since 9.5 Since 9 with -o- Since 10.5 No

Firefox Since 3.5 Since 7 Since 3.6 Since 6 with -moz-

Safari Since 3.1 Since 3.2 Since 3.1 Since 5.1 with -webkit-

Chrome Since 4 Since 4 Since 4 No

Internet Explorer Since 10 Since 6 Since 5.5 Since 10 with -ms-

iOS Since 3.2 Since 3.2 Since 3.2 Since 4.2 with -webkit-

Android Since 2.1 Since 2.1 Since 2.1 No

Chrome Mobile Since beta Since beta Since beta No

Opera Mobile Since 10 Since 10 with -o- Since 10 No

Opera Mini No Since 5 with -o- Since 5 No

TEXT SHADOWS

The CSS3 text-shadow property allows you to programmatically create drop shad-
ows on text and is supported across all modern browsers without prefixes. It is
very useful to be able to create a flexible drop shadow on text without relying on
JavaScript, text duplication, or any other such silliness. You can use drop shadows
for a variety of effects but generally for highlighting text, giving it depth, and mak-
ing it stand out.