Question

我正在使用Google网络字体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声明中{1}}所以这些值在CSS中正常工作（并加载自定义字体 - 而不是“假冒粗体”）。

我看到font-style提到加厚webkit字体，但我想如果你使用我给的第一段代码，你可能不会需要这个。

Answer 4

我注意到chrome倾向于使字体更清晰，firefox更平滑。你无能为力。祝你好运

Answer 5

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

http://developer.yahoo.com/yui/reset/

Answer 6

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

Answer 7

截至2014年，Chrome仍有一个已知的错误，如果使用的webfont安装了本地副本，它会选择使用本地版本，因此会导致OP渲染问题。

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

首先，定位Chrome浏览器或OSX（对我来说，问题仅在于OSX Chrome）。我使用这个简单的JS来快速检测浏览器/操作系统，您可以选择以您习惯的任何其他方式执行此操作：

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

现在您可以定位浏览器/操作系统，创建以下“新”字体：

@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;
}

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

在此处获取网址http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

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

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

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

或

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

完成。只需在任何需要的地方应用font-family规则。

Answer 8

不同的浏览器（以及FWIW，不同的操作系统）使用不同的字体渲染引擎，并且它们的结果并不相同。正如已经指出的那样，你不能对它做任何事情（除非显然你可以用图像或flash替换文本或使用javascript + canvas实现你自己的渲染器 - 如果你问我，后者有点过火。）

Answer 9

我发现这很有效：

-webkit-text-stroke: 0.7px;

或

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

尝试使用“0,7”值来根据您的需要进行调整。在您定义bodys字体的位置添加这些行。

这是一个例子：

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

Answer 10

我有同样的问题几个月了。最终，它通过在Chrome浏览器的设置中禁用以下设置来起作用。

将“加速的2D画布”设置为“已禁用” （在浏览器的地址栏中，转到chrome：// flags＃disable-accelerated-2d-canvas，更改设置，然后重新启动浏览器。）

由于此问题的修复程序已发生明显变化，因此我建议，如果此修复程序停止工作，则通常在将来关闭所有硬件加速的文本呈现/ 2D呈现功能。

在Google Chrome 55上，此问题似乎再次出现。如预期的那样，此修复程序禁用了硬件加速，只是更改了位置。

（对我而言）新修复程序似乎是：

设置->显示高级设置...->系统取消选中“在可用时使用硬件加速”

https://superuser.com/questions/821092/chromes-fonts-look-off

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

10 个答案: