Geek Answers Handbook

Rendering font differs from IE compared to FF and Chrome

I noticed that the rendering of fonts is significantly different if the size, for example. 11px. Launch Windows 7

The following HTML and CSS are used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing font</title> <style> body { font-family: "Helvetica","Arial",sans-serif; color: #1A1A1A; padding: 10px; } .foo{ font-size: 14px; } .bar{ font-size: 11px; } </style> </head> <body> <div class="foo"> <p>HOME</p> </div> <div class="bar"> <p>HOME</p> </div> </body> </html>

As you can see from the attached images, FF and Chrome tend to stretch the width at 11px, but not at 14px. enter image description here

Why is this a workaround?

+4
source share
4 answers

Firefox 7+ for Windows 7 uses the GDI Classic mode (with a hint) to render the so-called basic web fonts, such as Arial (since they are more clear and readable with the hint included) and DirectWrite (without a hint) for other fonts. The specific fonts for using GDI mode are shown in the following table: config pref:

 gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK, the rendering mode in Firefox also depends on the font size. For font sizes that are large enough and too small (possibly more than 15 pixels and possibly less than 9 pixels), it also uses DirectWrite fonts for Core Web.

IE9 under Windows 7 always uses DirectWrite.

Chrome seems to always use classic GDI mode.

+5
source

Different browsers use different engines.

And even FF will use a different algorithm on Linux than on Windows.

And even user settings (scaling, color schemes, perhaps for reasons of accessibility) can (and will) mercilessly violate your beautiful style.

As a workaround, I see two options:

  • Well, if you really need it desperately, draw the font of the house and put the PNG on the website
  • Change your style so that it does not depend on the size, type, or other font sizes. To make it look good (at least readable) in every browser
+1
source

Some font rendering engines may evaluate CSS properties that others do not have (for example, letter-spacing , text-rendering , font-stretch , font-size-adjust and others - see CSS3 Font Module ). You can try to play with those you find in the end to come up with (almost) uniform rendering across different browsers.

+1
source

Not an expert, but it worked for me ...

  html, body { zoom:1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }

All browser fonts now look the same cross-browsers.

0
source

More articles:


All Articles