Firefox和Chrome中的字体看起来不同

Question

我正在使用Google Web Font的PT-sans

font-family: 'PT Sans',Arial,serif;

但它在Chrome和Firefox中看起来有所不同

有什么我需要添加,以便它在所有浏览器中看起来相同吗？

Answer 1

对于FontSquirrel的ChunkFive字体,指定"font-weight:normal;" 当在标题中使用时,Firefox的渲染从看起来像屁股停止.看起来Firefox试图将假冒粗体应用于只有一个重量的字体,而Chrome则不然.

Answer 2

对我来说,Chrome网页字体看起来很糟糕,直到我把SVG字体放在WOFF和TrueType之前.例如:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

即便如此,Chrome的字体看起来比Firefox或IE更薄.Chrome在这一点上看起来很不错,但我通常想在IE和Firefox中设置不同的字体.我使用IE条件注释和jQuery的混合来根据浏览器设置不同的字体.对于Firefox,我在页面加载时运行以下函数:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

然后在我的CSS中,我可以说

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

同样,在IE条件评论中包含的仅IE样式表中,我可以说:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

Answer 3

有一些修复.但通常它可以修复:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

有时它可能是由于font-weight.如果您使用自定义字体,请@font-face确保您的font-weight语法正确.在@font-face的想法font-weight/ font-style性能,让您的font-family名字在不同的@font-face声明,而使用不同的font-weight或font-style因此这些值在CSS中正常工作(并加载您的自定义字体-而不是"假大胆").

我已经看到-webkit-text-stroke: 0.2px;提到加厚webkit字体,但我想你可能不会需要这个,如果你使用我给的第一段代码.

Answer 4

我注意到chrome会使字体更锐利，而Firefox则更平滑。您无能为力。祝好运

Answer 5

css reset可以解决问题，我不确定。

http://yuilibrary.com/yui/docs/cssreset/

Answer 6

为避免浏览器之间出现字体差异,请避免使用css样式来更改字体外观.使用font-size属性通常是安全的,但您可能希望避免使用font-weight:bold; 相反,你应该下载字体的粗体版本,并给它另一个字体系列名称.