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

Fonts looks different in Firefox and Chrome

提问by Tushar Ahirrao

I am using Google Web Font's PT-sans

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

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

but it looks different in Chrome and Firefox

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

Is there anything that I need to add so that it looks same in all browsers?

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

采纳答案by Vamsi Krishna B

css reset may fix the problem, I am not sure .

css reset 可能会解决这个问题，我不确定。

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

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

回答by Sergiy

For the ChunkFive font from FontSquirrel, specifying "font-weight: normal;" stopped Firefox's rendering from looking like ass when used in a header. Looks like Firefox was trying to apply a fake bold to a font that only has one weight, while Chrome was not.

对于 FontSquirrel 的 ChunkFive 字体，指定“font-weight: normal;” 当在标题中使用时，阻止 Firefox 的渲染看起来像屁股。看起来 Firefox 试图将假粗体应用于只有一个粗细的字体，而 Chrome 则没有。

回答by Sarah Vessels

For me, Chrome web fonts look crappy until I put the SVG font ahead of WOFF and TrueType. For example:

对我来说，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;
}

Even then, Chrome's fonts look thinner than in Firefox or IE. Chrome looks good at this point, but I usually want to set different fonts in IE and Firefox. I use a mixture of IE conditional comments and jQuery to set different fonts depending on the browser. For Firefox, I have the following function run when the page loads:

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

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

Then in my CSS, I can say

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

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

Likewise, in an IE-only stylesheet included within IE conditional comments, I can say:

同样，在 IE 条件注释中包含的仅 IE 样式表中，我可以说：

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

回答by Ryan Taylor

There are a few fixes. But usually it can be fixed with:

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

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

Sometimes it can be due to font-weight. If you are using a custom font with @font-facemake sure your font-weightsyntax is correct. In @font-facethe idea of the font-weight/font-styleproperties are to keep your font-familyname across different @font-facedeclarations while using different font-weightor font-styleso those values work properly in CSS (and load your custom font -- not "fake bold").

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

I've seen -webkit-text-stroke: 0.2px;mentioned to thicken webkit fonts, but I think you probably won't need this if you use the first piece of code I gave.

我已经看到-webkit-text-stroke: 0.2px;提到要加厚 webkit 字体，但我认为如果您使用我提供的第一段代码，您可能不需要它。

回答by Dave

To avoid font discrepancies across browsers, avoid using css styles to alter the look of the font. Using the font-size property is usually safe, but you may want to avoid doing things like font-weight: bold; instead, you should download the bold version of the font and give it another font-family name.

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

回答by andrewk

I've noticed that chrome tends to make fonts a bit more sharper and firefox a bit smoother. There is nothing you can do about it. good luck

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

回答by Antonio Max

As of 2014, Chrome still has a known bug where if the webfont being used has a local copy installed, it choses to use the local version, hence, causing OP rendering issues.

到 2014 年为止，Chrome 仍然存在一个已知错误，即如果正在使用的 webfont 安装了本地副本，它会选择使用本地版本，从而导致 OP 渲染问题。

To fix this, you can do the following:

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

First, target Chrome Browser or OSX (For me, the issue was with OSX Chrome only). I have used this simple JS to get quick Browser/OS's detection, you can chose to do this in any other way you're used to:

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

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

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

Now that you can target a Browser/OS, create the following 'new' font:

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

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

The font URL is the same your browser uses when embedding the google webfont. If you use any other font, just copy and change the URL accordingly.

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

Get the URL here http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

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

You may also rename your @font-face custom font-family alias.

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

Create a simple CSS rule to use that font targeting Browser/OS or both:

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

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

Or

或者

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

Done. Just apply the font-family rule wherever you need to.

完毕。只需在任何需要的地方应用字体系列规则。

回答by CAFxX

Different browsers (and FWIW, different OSes) use different font rendering engines, and their results are not meant to be identical. As already pointed out, you can't do anything about it (unless, obviously, you can replace text with images or flash or implement your own renderer using javascript+canvas - the latter being a bit overboard if you ask me).

不同的浏览器（和 FWIW，不同的操作系统）使用不同的字体渲染引擎，它们的结果并不意味着完全相同。正如已经指出的那样，您对此无能为力（除非，显然，您可以用图像或 Flash 替换文本或使用 javascript+canvas 实现自己的渲染器 - 如果您问我，后者有点过分）。

回答by Zeton

i found this to be working great :

我发现这很好用：

-webkit-text-stroke: 0.7px;

or

或者

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

experiment with the "0,7" value to adjust to your needs. The lines are added where you define the bodys font.

试验“0,7”值以适应您的需要。线条会添加到您定义正文字体的位置。

here is an example:

这是一个例子：

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

回答by Bell

I had the same issue for a couple of months. Finally, it got worked by disabling below settings in Chrome browser's settings.

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

Set "Accelerated 2D Canvas" to "Disabled" (In the browser's address bar, go to chrome://flags#disable-accelerated-2d-canvas, change the setting, relaunch the browser.)

将“Accelerated 2D Canvas”设置为“Disabled”（在浏览器的地址栏中，转到 chrome://flags#disable-accelerated-2d-canvas，更改设置，重新启动浏览器。）

Since the fix for this issue has clearly changed, I would suggest in general turning off any hardware-accelerated text-rendering/2D-rendering features in the future if this fix stops working.

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

On Google Chrome 55, this issue appears to have cropped up again. As anticipated, the fix was disabling hardware acceleration, it just changed locations.

在 Google Chrome 55 上，这个问题似乎又出现了。正如预期的那样，修复是禁用硬件加速，它只是改变了位置。

The new fix (for me) appears to be:

新的修复（对我来说）似乎是：

Settings -> Show advanced settings... -> System UNCHECK "Use hardware acceleration when available"

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

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

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