Css 浏览器无法正确呈现字体,抗锯齿问题

Css 浏览器无法正确呈现字体,抗锯齿问题,css,fonts,webkit,antialiasing,google-font-api,Css,Fonts,Webkit,Antialiasing,Google Font Api,我在浏览器上渲染字体时遇到了一些严重的抗锯齿问题,当我在fireworks中进行设计时,一切看起来都很酷,但现在当我将它们用作html/文本并在浏览器中查看时,在我测试的所有主要浏览器中,它们都变得非常粗糙和丑陋。 我在这里使用了两种字体,较轻的是'Segoe UI Light',较粗的是Roboto Slab: 我在互联网上搜索,发现了一些解决这个问题的技巧,但在这里没有一个对我有效,你们可以在我的CSS中看到它们 <link href='http://fonts.googleapis

我在浏览器上渲染字体时遇到了一些严重的抗锯齿问题,当我在fireworks中进行设计时,一切看起来都很酷,但现在当我将它们用作html/文本并在浏览器中查看时,在我测试的所有主要浏览器中,它们都变得非常粗糙和丑陋。 我在这里使用了两种字体,较轻的是
'Segoe UI Light'
,较粗的是
Roboto Slab

我在互联网上搜索,发现了一些解决这个问题的技巧,但在这里没有一个对我有效,你们可以在我的CSS中看到它们

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>

文本阴影可能有助于
文本阴影:#333 0px 0px 1px


还可以尝试
-webkit text stroke:1px rgba(0,0,0,0.1)

如果您想在IE浏览器中支持文本阴影,请查看此链接
body {
background-position: right;
background-position: top;
background-repeat: no-repeat;
font-family: 'Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-smooth: always;
text-shadow: #eee 0px 1px 1px;
-webkit-text-stroke: 1px;
-webkit-font-smoothing: subpixel-antialiased;
}

nav ul {
margin: 0px;
padding: 0px;
width: 100%;
font-family: 'Roboto Slab','Segoe UI Light', 'Century Gothic', Verdana, Arial, Helvetica, sans-serif;
font-size: 19px;
text-align: center;
list-style-type: square;
}

nav li {
color: #FFF;
display: block;
float: left;
height: 36px;
text-transform: uppercase;
width: 200px;
margin: 15px 0 0 0;
}