CSS平滑字体样式

我想下面的字体样式复制我的网页： https://d13yacurqjgara.cloudfront.net/users/104117/screenshots/2080529/attachments/373853/real-pixels.png（向下滚动到“版式”）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; 
}

所有我与这个实现是这个可怜的造型：

http://i.imgur.com/kwIzWMs.png

我甚至觉得这是不一样的字体。更重要的是，我尝试过的不同字体重量从来没有与模型中的字体匹配......我不知道该从哪里出发，有人能让我知道如何改善这种情况吗？

来源

2015-06-07 David

什么是你的文字代码？ –

http://jsfiddle.net/xhvwj9th/ – Dmitriy

您使用的字体渲染引擎的设置是什么？ –

我有你在你的评论曾这样描述了同样的问题，我意识到这是因为我的

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

来源

2015-06-07 14:26:05

非常感谢，我有点担心我不得不删除我的CSS重置。这也解释了为什么jsfiddle工作，而不是我的本地版本 – David

只是为了澄清：所有@import规则必须先于所有其他样式规则。这是由W3C的授权。 http://www.w3.org/TR/CSS2/cascade.html#at-import（我不知道为什么;如果任何人可以解释...） –

该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

来源

2015-06-07 12:02:51

* { 
    margin: 0; 
    padding: 0; 
}

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

来源

2015-06-07 14:20:24 David

使用

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

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

来源

2015-06-07 14:31:01 connexo

CSS平滑字体样式

回答

相关问题