CSS平滑字體樣式

我想下面的字體樣式複製我的網頁： https://d13yacurqjgara.cloudfront.net/users/104117/screenshots/2080529/attachments/373853/real-pixels.png（向下滾動到「版式」）CSS平滑字體樣式

我已經試過如下：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700); 

body { 
    font-family: 'Roboto', sans-serif; 
    color: #334455; 
    background-color: #EEF2F4; 
    font-weight: 400; 
}

所有我與這個實現是這個可憐的造型：

http://i.imgur.com/kwIzWMs.png

我甚至覺得這是不一樣的字體。更重要的是，我嘗試過的不同字體重量從來沒有與模型中的字體匹配......我不知道該從哪裏出發，有人能讓我知道如何改善這種情況嗎？

來源

2015-06-07 David

什麼是你的文字代碼？ –

http://jsfiddle.net/xhvwj9th/ – Dmitriy

您使用的字體渲染引擎的設置是什麼？ –

我有你在你的評論曾這樣描述了同樣的問題，我意識到這是因爲我的

@import url

是復位後。我建議你嘗試以下方法：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500,700); 

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
} 

body { ... }

來源

2015-06-07 14:26:05

非常感謝，我有點擔心我不得不刪除我的CSS重置。這也解釋了爲什麼jsfiddle工作，而不是我的本地版本 – David

只是爲了澄清：所有@import規則必須先於所有其他樣式規則。這是由W3C的授權。 http://www.w3.org/TR/CSS2/cascade.html#at-import（我不知道爲什麼;如果任何人可以解釋...） –

該CSS似乎是正確的。我試圖用一個虛擬的HTML頁面相同，它能正確呈現：

<h2>Hello How are you?</h2> 
<p>CSS Smooth font styling CSS Smooth font styling CSS Smooth font styling </p>

http://jsfiddle.net/qhz1vm4v/1

來源

2015-06-07 12:02:51

* { 
    margin: 0; 
    padding: 0; 
}

我有這個軟復位在我的CSS文件的開頭。刪除後渲染效果很好。我從來沒有想過它會影響字體的呈現方式。

來源

2015-06-07 14:20:24 David

使用

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased equivalent in firefox?

來源

2015-06-07 14:31:01 connexo

CSS平滑字體樣式

回答

相關問題