可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have noticed that rendering of fonts differ considerably if the size is, for example. 11px. Running Windows 7

The following HTML and CSS is 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 the attached images shows, FF and Chrome tends to tighten the width in 11px but not in 14px.

Why is that, is there a workaround?

回答1:

Firefox 7+ under Windows 7 uses GDI Classic mode (with hinting) to render so called Core Web fonts like Arial (since they are more sharp and readable with hinting enabled), and DirectWrite (without hinting) for other fonts. Specific fonts to use GDI mode with are listed in following about:config pref:

gfx.font_rendering.cleartype_params.force_gdi_classic_for_families

AFAIK, rendering mode in Firefox depends also on font size. For enough-big font-sizes and too small ones (perhaps greater than 15px and maybe less than 9px), it uses DirectWrite for Core Web fonts too.

IE9 under Windows 7 uses DirectWrite always.

Chrome seems to use GDI classic mode always.

回答2:

Different browsers use different engines.

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

And even user settings (zooming, color schemes; possibly for accessibility reasons) can (and will) break your beautiful style mercilessly.

As "workaround" I see two options:

Well if you really desperately must, render the font at home and put a PNG on the site
Change your style so that it does not depend on any font size, type or other proportions. So that it will look good (at least readable) in every browser

回答3:

Certain font rendering engines may honor the CSS properties that others don't (like letter-spacing, text-rendering, font-stretch, font-size-adjust and others - see the CSS3 Font Module). You could try playing around with those you find, to eventually come up with (almost) uniform rendering across different browsers.

回答4:

Not an expert but this 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 seem to now rendered the same cross-browsers.

Rendering font differs from IE compared to FF and

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

Rendering font differs from IE compared to FF and

问题:

回答1:

回答2:

回答3:

回答4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮