Rendering font differs from IE compared to FF and

2019-01-24 17:14发布

站内问答 / HTML/CSS
1865 4 5

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.enter image description here

Why is that, is there a workaround?

4条回答
乱世女痞
2楼-- · 2019-01-24 17:39

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
查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-01-24 17:49

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.

查看更多
0人赞 添加讨论(0) 举报
走好不送
4楼-- · 2019-01-24 17:53

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.

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
5楼-- · 2019-01-24 17:55

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)