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

我正在使用Google Web字体的PT SAN

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

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

---

有什么我需要添加的，以便在所有浏览器中看起来都一样吗？

我注意到chrome倾向于使字体更清晰，firefox更流畅。

---

你对此无能为力。祝你好运，css重置可能会解决问题，我不确定

---

不同的浏览器和FWIW，不同的操作系统使用不同的字体渲染引擎，它们的结果并不意味着完全相同。正如已经指出的，你不能对此做任何事情，除非你可以用图像或flash替换文本，或者使用javascript+canvas实现你自己的渲染器——如果你问我，后者有点过分。

对于FontSquirrel的ChunkFive字体，指定字体重量：normal；在标题中使用时，已停止Firefox的渲染，使其看起来像驴子。看起来Firefox试图对只有一个权重的字体应用假粗体，而Chrome没有。对我来说，Chrome web字体看起来很糟糕，直到我将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; }

---

为了避免不同浏览器之间的字体差异，请避免使用css样式来改变字体的外观。使用font-size属性通常是安全的，但您可能希望避免执行诸如font-weight:bold；相反，您应该下载字体的粗体版本，并给它另一个字体系列名称。

我发现这很有效：

-webkit-text-stroke: 0.7px;

或

使用0,7值进行实验，以适应您的需要。 将在定义正文字体的位置添加这些行

以下是一个例子：

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;

---

截至2014年，Chrome仍存在一个已知的缺陷，即如果使用的webfont安装了本地副本，它会选择使用本地版本，因此会导致OP呈现问题

要解决此问题，可以执行以下操作：

首先，我的目标是Chrome浏览器或OSX，问题只在于OSX Chrome。我使用了这个简单的JS来快速检测浏览器/操作系统，您可以选择使用您习惯的任何其他方式：

现在您可以针对浏览器/OS，创建以下“新”字体：

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

字体URL与嵌入google webfont时浏览器使用的相同。如果您使用任何其他字体，只需相应地复制和更改URL即可

在这里获取URL

您还可以重命名@font-face自定义字体系列别名

创建一个简单的CSS规则，以使用针对浏览器/操作系统或两者的字体：

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

或

---

完成了。只要在需要的地方应用字体族规则。

有一些修复方法。但通常可以通过以下方式进行修复：

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

有时，这可能是由于字体的重量。如果您使用带有@font-face的自定义字体，请确保您的字体权重语法正确。在@font-face中，字体重量/字体样式属性的思想是在使用不同字体重量或字体样式的同时，在不同的@font-face声明中保留您的字体族名称，以便这些值在CSS中正常工作，并加载自定义字体-而不是假粗体

---

我见过-webkit文本笔划：0.2px；提到加厚webkit字体，但我认为如果使用我给出的第一段代码，您可能不需要它。

几个月来，我都遇到过同样的问题。最后，它通过在Chrome浏览器的设置中禁用以下设置来工作

将加速二维画布设置为禁用 在浏览器的地址栏中，转到chrome://flagsdisable-accelerated-2d-canvas，更改设置，重新启动浏览器

由于此问题的修复程序已明显更改，因此我建议，如果此修复程序停止工作，通常在将来关闭任何硬件加速的文本渲染/2D渲染功能

在谷歌Chrome55上，这个问题似乎又出现了。正如预期的那样，修复程序正在禁用硬件加速，只是更改了位置

对我来说，新的解决方案似乎是：

设置->显示高级设置…->系统 如果可用，取消选中“使用硬件加速”

---

不同的浏览器呈现字体的方式可能略有不同。您无法更改。除非您想实现自己的字体渲染器，这将使您的网站比使用字体渲染器慢。@muntoo:或使用images/flash/PDF，这将显示更多内容consistently@Merlyn摩根·格雷厄姆：图像和闪光灯已经过时了，网络字体是最新的trend@I-M-JM：我同意。还有，HTML5/SVG>Flash。但我宁愿使用flash/silverlight/PDF/simple图像，也不愿像muntoo建议的那样尝试编写字体渲染器。我想这是个玩笑，但仍然是。

---

.我相信这就是我的问题所在。很难确定！在我的测试中，这很有帮助，但是字体看起来还是不一样。谢谢，我通常会包括重置，但在最近的HTML5项目中，我使用的是一个样板，而他们没有包括重置。这正是导致chrome中字体看起来不好的原因。这对我也很有效，但是，一旦重置应用于html的标题，我该如何应用自己的样式表呢？我的意思是，我有我自己的样式表，称之为mystyles.css，我希望它能控制网站的布局和样式，同时保持一致性。好的，我想出来了。只需将：放在你的标题中，在其他样式表链接之前。如果您在查看上面链接提供的@Vasmi命令时遇到问题。我建议在YUI CSS基础部分下的链接。我尝试重置和规范一个一个，但仍然不同。在chrome中，文本看起来更清晰或更小。有新的解决方案吗？这里是YUI css重置的新链接：。我使用谷歌字体和css重置没有任何区别。只是一个建议，核武器的Helvetica特定的定义。。。sans serif通常默认为平台最合适的Helvetica类字体。在windows上为Arial，在OSX上为Helvetica，在Android上为Droid SAN，在大多数其他系统上为Open SAN。应用此代码时，字体看起来仍然不同。例如，小写字母，在Firefox中尾巴向上卷曲，而在Chrome中大部分是扁平的。对于小写的b，在Firefox的左下角有一个额外的衬线，而Chrome没有这个衬线。您可以使用-webkit字体平滑，例如，它可能在近两年后不再适用。我应该补充一点，Chrome可能仍会显示字体加厚，因此您可以通过CSS对其进行规范化：-webkit文本笔划：0.2px；如果您使用JS识别浏览器并根据类ie body.chrome、body.firefox为它们指定不同的webkit文本笔划值，那么这一点就很有效。不幸的是，对我来说，添加此选项后，不同浏览器中的字体看起来仍然不同。

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

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