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;

community version

CSS平滑字体样式

4 个答案: