2013-06-23 1 views
0

브라우저에서 글꼴을 렌더링하는 중 심각한 앤티 앨리어싱 문제가 발생합니다. 불꽃 놀이의 모든 디자인이 멋지게 보이지만 지금은 HTML로 사용하고 있습니다./텍스트 및 브라우저에서보기 그들은 내가 테스트 한 모든 주요 브라우저에서 매우 울퉁불퉁하고 추악합니다. 내가 여기에 밝은 한 두 개의 글꼴을 사용하고 하나가 Roboto Slab'Segoe UI Light' & 대담한입니다 : 내가 인터넷 & SO를 통해 검색하여이 문제를 해결하기 위해 의미 된 몇 가지 트릭을 찾았지만 아무도 근무하지 브라우저에서 글꼴을 올바르게 렌더링하지 못했습니다. 앤티 앨리어싱 문제

enter image description here

나를 여기에, 당신은 내 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

텍스트 그림자는 IE 브라우저는이 링크 http://stackoverflow.com/questions/4205478/text-을 살펴 걸쳐 텍스트 그림자를 지원하려면 또한 -webkit-text-stroke: 1px rgba(0,0,0,0.1)

+0

을 시도 text-shadow: #333 0px 0px 1px;

도움이 될 그림자 인터넷 익스플로러 – DownDown

관련 문제