Text shadow in IE, alternatives
I have a need for text-shadow for inline, long, paragraph text in IE. I understand progressive enhancement, but the situa开发者_JS百科tion 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.
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
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);
}
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
精彩评论