Fixing ugly Greek symbols?

Question

When displaying Greek symbols with, for example, π, I get very different results in Chrome and Safari versus Firefox. As some example text, I have:

Chrome:

Firefox:

Is there a way to get Webkit to render the letters closer to Gecko's style, which I much prefer here?

EDIT: Actually, it seems the problem does not have to do with Webkit itself, as it seems to render the way I like it under Chrome in Windows 7: (I was using Snow Leopard and didn't bother to check on my other computers, heh)

Also, a bit offtopic, but does anyone know why the fonts seem to be rendered a bit more boldly on the Mac than on the PC?

Answer 1

Okay, so the weirdest thing happened. I was looking at my site again and suddenly realized that the Greek was rendering perfectly. Am not sure what happened, since I don't think I ran any updates or anything, but the problem's gone now. Not very helpful of course to others with this problem, but that's just what happened...

Answer 2

I would guess that firefox is using the Symbol font, whereas Safari is using whichever unicode font has the right characters.

On my Mac, this works: <span style="font-family: Symbol">&pi;</span>. Also, setting the font of the container to Times New Roman seems to work as well.

Answer 3

Your browser will render using whatever fonts it has available. Some fonts may be missing certain characters, in which case the browser will use another font for those characers. If, in your CSS, you tell the browser what the font-family is, it can better pick a matching font.

font: "Times New Roman", serif;

Now the browser will pull in missing characters from a serif font.

Of course, with the @font-face directive, you can force the use of a font which has all the characters you need.