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字體差異

回答

相關問題