views:

284

answers:

4

Hello everybody.

Since long time i been having a real problem with the different ways that each browser display text.

Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.

I would like to know if some as come with a solution. Not turning the text into a image.

Thanks.

EDIT:

This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.

Snapshot

+1  A: 

You can use SIFR.

Alix Axel
Thanks. I will add it to my bookmarks in case Cufon doesn't do the job.
Fábio Antunes
+2  A: 

Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.

If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.

There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.

Jimmie Lin
Done. I have added more info and a pic of the problem.
Fábio Antunes
I will be trying Cufon. Seems to be more lightweight. Thanks.
Fábio Antunes
+1, Cufon is new to me, thanks.
Alix Axel
I saw the screenshot now - IE seems to do that for some reason, and that can't be changed (well, just see Google - the faded-in text is not rendered). Cufon and SIFR will of course do the job (Cufon transforms text into images, but SIFR will load a flash object)
Jimmie Lin
+3  A: 

SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)

Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.

ZoogieZork
Its just to use in the navigation bar, making it look alike on every browser.
Fábio Antunes
In that case, SIFR will probably be closest to what you want. If the user's browser has Flash installed then they'll see the Flash-rendered text, elsewhere (mobile browsers, anyone?) they'll get the browser-rendered text as a fallback.
ZoogieZork
But there is some Mobile devices that don't have Flash, but most of them have Javascript thats why i as thinking more about Cufon.
Fábio Antunes
I'm not sure about Cufon. I never experimented with it on my iPhone, but it should work (As it just transforms text into images)
Jimmie Lin
A: 

Although this problem is already about a week old, here is a solution that I found, that might be related:

http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/

If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.

Jimmie Lin