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

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

我所能做到的就是这种糟糕的造型：

我甚至觉得它的字体不一样。更重要的是，我尝试过的不同字体重量从未与模型中的字体匹配。。。我不知道该怎么办，有人能告诉我如何改进吗？

CSS似乎是正确的。 我在一个虚拟HTML页面上尝试了同样的方法，结果显示正确：

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

你好，你好吗？ CSS平滑字体样式CSS平滑字体样式CSS平滑字体样式CSS平滑字体样式

---

我在css文件的开头进行了软重置。删除后，渲染效果良好。我从未想过这会对字体的呈现方式产生影响。

我曾经遇到过与您在评论中描述的问题相同的问题，我意识到这是因为我的

@import url

是在重置之后。我建议您尝试以下方法：

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

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

使用

---

您的文本代码是什么？您使用的字体呈现引擎的设置是什么？它在JSFIDLE上看起来很不错，但在我的localhost上却不是。我现在迷路了，非常感谢，我有点担心我必须删除css重置。这也解释了为什么JSFIDLE是有效的，而不是我的本地版本只是为了澄清：所有@import规则必须优先于所有其他样式规则。这是W3C的授权。（我不知道为什么；如果有人能解释的话……）