Firefox和Chrome中的CSS字体差异

我在Firefox/Chrome中遇到字体差异问题。所有的字体在Chrome中比在Firefox中更大胆，更大，但我想像他们在Firefox中一样。我试图添加不同的属性，但似乎没有什么工作。我使用twitter bootstrap，因此normalize.css已包含在内。任何想法，为什么这样的区别？Firefox和Chrome中的CSS字体差异

我附上照片，并在这里是所使用的CSS：我怎么就看它

<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/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; 
}

和导入的字体我的眉毛。

JSFiddle

来源

2016-03-02 Angel M.

您能否提供一个使用JSFiddle之类的虚拟示例？ –

@NitinGarg我创建了一个jsfiddle示例，并附上它在我的眉毛上的外观形象 –

@MrLister chrome版本是48，FF 44.我尝试使用font-size-adjust（并包含在css中），但它仅在FF上有效 - 但我喜欢FF上的字体，因为Chrome不起作用（请参阅我的评论） –

的浏览器不支持所有相同的字体显示功能还没有，很遗憾。如果您只使用基础知识，那么跨浏览器的字体看起来是一样的。

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

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

但是一些功能，如font-size-adjust，将只在某些浏览器，而不是别人的影响。

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

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

相同的东西像-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; 
 
}

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

那么到底它是充分的跨浏览器兼容或获得最佳的结果在每个之间的权衡。

来源

2016-03-02 08:13:10

再次感谢:)，即使在我的情况下，我不得不删除所有额外的设置，使其看起来或多或少相似 –

Firefox和Chrome中的CSS字体差异

回答

相关问题