CSS Smooth шрифта стайлинг

Question

Я пытаюсь скопировать следующий стиль шрифта в моей странице: https://d13yacurqjgara.cloudfront.net/users/104117/screenshots/2080529/attachments/373853/real-pixels.png (прокрутите вниз до «типографика»)

Я попытался следующие:

@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

Я даже чувствую, что это не тот же шрифт. Более того, разный размер шрифта, который я пробовал, никогда не соответствовал тому, который был у модели ... Я понятия не имею, куда идти отсюда, может кто-нибудь рассказать мне о том, как улучшить это?

Answer 1

У меня была та же проблема, вы описали в своем комментарии один раз, и я понял, что это произошло потому, что мой

@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 { ... } 

Answer 2

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

Answer 3

* { 
    margin: 0; 
    padding: 0; 
} 

У меня был мягкий сброс в начале моего файла CSS. После удаления рендеринг был хорош. Я никогда не думал, что это повлияет на способ отображения шрифтов.

Answer 4

Используйте

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

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