Firefox 和 Chrome 中的 CSS 字体差异答案

【问题标题】：CSS font difference in Firefox and ChromeFirefox 和 Chrome 中的 CSS 字体差异
【发布时间】：2016-06-14 22:00:57
【问题描述】：

我遇到了 Firefox/Chrome 字体差异的问题。 Chrome 中的所有字体似乎都比 Firefox 中的更粗更大，但我想像在 Firefox 中一样。我尝试添加不同的属性，但似乎没有任何效果。我正在使用 twitter 引导程序，所以 normalize.css 已经包含在内。任何想法，为什么会有这样的差异？

我正在附上照片，这是使用的 css：

body{
  background-color: #f9f9f9;
  color: #555555;
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  font-weight:400;
  font-size-adjust: 0.5;
  font-weight:400;
  -webkit-text-stroke: 0.7px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; 
  -webkit-transform: translate3d(0px, 0px, 0px); 
}

h3 {
  font-family:"Lato",sans-serif;
  font-weight: 300;
  letter-spacing: normal;
  margin-bottom: 33px;
  word-spacing: 2px;
  font-size: 2.5em !important;
  line-height: 2 !important;
}

和导入的字体：

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>

这是链接，并附上我在浏览器上看到它的图片。

JSFiddle

【问题讨论】：

您能否提供一个使用 JSFiddle 之类的虚拟示例？
@NitinGarg 我创建了一个 jsfiddle 示例并附上了它在我的浏览器上的外观图片
@MrLister chrome 版本是 48，FF 44。我尝试使用 font-size-adjust （并且包含在 css 中），但它只适用于 FF - 但我喜欢字体就像在 FF 上一样，因为 Chrome 不起作用（请参阅我的 cmets）
@AngelM。你是对的，它没有。嗯，MDN 说它可以在 v44 中工作。但显然不是。所以回顾一下，如果你从小提琴中删除所有-webkit 属性和font-size-adjust，结果在 Chromium 和 Mozilla 中是相同的。
@MrLister 嗯，不适合我，这是一样的区别:(

标签： css google-chrome firefox cross-browser

【解决方案1】：

不幸的是，浏览器还不都支持相同的字体显示功能。如果你只使用基础，字体在浏览器中看起来是一样的。

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
}

&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;

但某些功能，例如font-size-adjust，只会在某些浏览器中有效，而在其他浏览器中无效。

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
  font-size-adjust: 0.4;
}

&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;

-webkit-text-stroke 之类的也一样。

div {
  font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;
  -webkit-text-stroke: 0.7px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; 
}

&lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/div&gt;

因此，最终需要在完全的跨浏览器兼容性或获得最佳结果之间进行权衡。

【讨论】：

再次感谢 :) ，即使在我的情况下，我也必须删除所有其他设置以使其看起来或多或少相似