Text shadow in IE, alternatives

Question

I have a need for text-shadow for inline, long, paragraph text in IE. I understand progressive enhancement, but the situation is different. I do absolutely need text-shadow, it's not a design issue, but a matter central to the function of my app.

In any case, IE does not support CSS text-shadow. What are some alternatives? I know that some fonts have outlines that creates a similar effect as text-shadows, but does IE support web-unsafe fonts?

What about dynamic image replacement? Is that a viable tactic? I'm thinking probably not, considering the length of the text.

Does anyone have any suggestions? I've also considered forcing google chrome frame, but that's sort of a last resort thing if there are no other viable strategies.

Thanks.

Answer 1

I think you should use a true type font(.ttf) font and convert it to .eot. Then referance it in your html via java script likes this:

<style type="text/css">
@font-face {
 font-family: MyCustomFont;
 font-size:10.0pt;
 src: url("fontname_free.eot");/* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 font-size:10.0pt;
 src: url("fontname_free.ttf") format("truetype");/* TTF file for CSS3 browsers */
}

Then in your actual html you make reference to the font in the style attribute like this:

You can convert from .ttf to .eot here and find further explaination on how it workd http://www.kirsle.net/wizards/ttf2eot.cgi

Answer 2

I think that here, with your core requirements, Flash is your best best. I'm not sure if SIFR supports shadow, but that's worth looking into.

It's certainly a cheaper burden on your users than forcing Chrome frame.

EDIT:

Looks like SIFR is quite flexible on this front:

http://fortysevenmedia.com/blog/archives/sifr_3_hard_drop_shadows/

Even more promising, unless I'm mistaken, it looks like it may be supported in IE:

http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx

so:

.className {
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

Answer 3

I have just used this for text-shadow in IE:

p { zoom: 1; background-color: *Your background colour*; -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=*Your background colour*) progid:DXImageTransform.Microsoft.DropShadow(Color=#000, OffX=1, OffY=1)";  filter: progid:DXImageTransform.Microsoft.Chroma(Color=*Your background colour*) progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000);
}

My only concern with this is that if the user has changed their text rendering on their PC it will now be so pretty. Mine has turned out okay if I don't bold the text, but as soon as I do it goes blocky.

I may just leave the text shadow in IE but how S**! is that... lol