CSS 平滑字体样式答案

【问题标题】：CSS Smooth font stylingCSS 平滑字体样式
【发布时间】：2015-06-07 22:31:01
【问题描述】：

我正在尝试在我的页面中复制以下字体样式： 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

我什至觉得它不是同一种字体。更重要的是，我尝试过的不同字体粗细从未与模型中的字体相匹配......我不知道从哪里开始，有人能告诉我如何改进吗？

【问题讨论】：

你的文本代码是什么？
工作jsfiddle.net/xhvwj9th
您使用的字体渲染引擎的设置是什么？
它实际上在 jsfiddle 上看起来很棒，但在我的本地主机上却不是。我现在迷路了

标签： css

【解决方案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 { ... }

【讨论】：

非常感谢，我有点担心我必须删除我的 css 重置。这也解释了为什么 jsfiddle 工作而不是我的本地版本
澄清一下：所有@import 规则必须在所有其他样式规则之前。这是 W3C 的授权。 w3.org/TR/CSS2/cascade.html#at-import（我不知道为什么；如果有人能解释...）

【解决方案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

【讨论】：

【解决方案3】：

* {
    margin: 0;
    padding: 0;
}

我在我的 css 文件的开头有这个软重置。删除后渲染效果很好。我从没想过它会影响字体的呈现方式。

【讨论】：

【解决方案4】：

使用

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

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

【讨论】：