2013-06-23 140 views
0

我面對一些嚴重的反走樣的問題,同時使我的字體在瀏覽器中,當我在煙花一切看起來很酷鑽研了由設計,但現在,當我使用他們作爲HTML/text並在瀏覽器中查看它們,在我測試的所有主流瀏覽器中,它們都會變得非常纖巧和醜陋。 我使用兩種字體這裏的打火機一個是'Segoe UI Light' &一個是Roboto Slab的大膽:瀏覽器無法正確渲染字體,抗鋸齒問題

enter image description here

我搜索了網上& SO,發現這注定要解決這一一些技巧,但沒有工作了我在這裏,你可以看到他們在我的CSS

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

in .CSS

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

回答

0

文本陰影可能有助於text-shadow: #333 0px 0px 1px;

也可以嘗試-webkit-text-stroke: 1px rgba(0,0,0,0.1)

+0

如果你想支持文字陰影跨瀏覽器IE看看這個鏈接http://stackoverflow.com/questions/4205478/text-影子在互聯網資源管理器 – DownDown