Firefox和Chrome中的CSS字体差异

Question

我在Firefox / Chrome中遇到字体差异问题。 Chrome中的所有字体看起来都比Firefox更大胆，但我想要像在Firefox中一样。 我试图添加不同的属性，但似乎没有什么真正有效。 我使用的是twitter bootstrap，所以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

Answer 1

不幸的是，浏览器还不支持相同的字体显示功能。如果您只使用基础知识，那么各种浏览器的字体看起来都是一样的。

＆＃13;

＆＃13;

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

＆＃13;

<div>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.</div>

＆＃13;

＆＃13;

＆＃13;

但是某些功能（例如font-size-adjust）只会在某些浏览器中产生影响，而不会影响其他功能。

＆＃13;

＆＃13;

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

＆＃13;

<div>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.</div>

＆＃13;

＆＃13;

＆＃13;

与-webkit-text-stroke之类的东西相同。

＆＃13;

＆＃13;

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

＆＃13;

<div>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.</div>

＆＃13;

＆＃13;

＆＃13;

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