Font-Face and Windows

HTML & CSS
1

Hello,

Here is the link…

modo*

Now I got my h2 looking decent in IE by using CSS Filters…

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
zoom:1

But now some of my letters in h2 get cut off, how can I fix this on IE. Like the g’s and y’s you’ll see what I mean…

Now I tried to use same filters on the paragraph tags and the li in the navs and that was an epic fail.

It made the font like a grey for the <p> tags and well it didnt even work on the navigation <li>

So basically what I’m looking for is to fix the h2 so the full letters show and figure out how to make the text look better.

Ive been looking further into it and seems I’m going to need to use text-shadow for a Firefox solution.

Thanks in advance for the help.

Mike

2

Have you tried to use H2 in HTML instead of CSS to see what happen?

Try and see if you have the same outcome.

Which IE version are you using?

:slight_smile:

fastreplies

3

Not sure what you mean with the h2 all I need in IE8 is too see some of the text.

Then just need a hand to make font-face work nicely on Windows machines, I been looking all day and trying different things

4

I remember IE had various excuses to cut off text. Creating a large-enough line-height manually always fixed it for me.

5

Hi,

Yes if you have a shorter line-height than the font-size then IE is prone to clip the text. However on a large font size like that increasing the line-height will make a big difference.

I think you can solve the problem by adding 10px padding-bottom instead and the the clipped content will still show in IE.

e.g.


  #story-brand h2 {padding:0 0 10px;}

Using the filter to fix the text rendering in IE does work but be careful as the filters can have detrimental and undexpected side effects so check carefully.

6

Thank you Paul, yes the filter only works in IE and only for the h2 text.

The paragraph text it worked but the text went gray so didnt really solve my solution may have to use a different font for the paragraph text as can barely read it on Windows machines, unless you may be able to think of another solution :slight_smile:

7

I tried the font-squirrel that you suggested, I’m not on a Windows machine right now but if what the demo shows it appears the fonts are rendering better, but could you check it out to see if its more readable.

Many thanks,

Mike

8

It seems to look better in IE now as far as my eyes can tell :slight_smile: