CSS 平滑字体样式

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

我用这个实现的只是这种糟糕的样式:

/image/bGzNV.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 { ... }