흐릿한 글꼴 문제

Question

내가 제대로로드하는 웹 글꼴로드 @ 글꼴 얼굴을 사용하고

:

@font-face { 
font-family: 'HelveticaNeueLight'; 
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot'); 
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'), 
    url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg'); 

font-weight: normal; 
font-style: normal; 
font-variant:normal; 

} 나는 또한 스타일과 굵은 텍스트에 다른 클래스가

을 :

.BusinessLeftHeader{ 
    font-family: HelveticaNeueLight; 
    font-size: 32px; 
    padding: 30px 0 5px; 
    text-align: center; 
    line-height: 1; 
    font-variant: normal;  
} 

이제 iPad 2에서 글꼴이 굵게 표시되지 않습니다. 텍스트가 흐릿한 효과 또는 이와 유사한 것으로 보입니다.

이 코드를 사용하여이 문제를 해결할 수도 있습니다.

-moz-font-smoothing: none; 
font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 

하지만 여전히 동일한 문제가 발생합니다. iPad 2에서 텍스트가 잘 보이지 않습니다. 확대하면 잘 보입니다.

Answer 1

은 먼저 당신이 충돌하는 스타일의 설정이 여기에 몇 가지 고려 사항이 있습니다

-moz-font-smoothing: none; 
font-smoothing: antialiased; 
-webkit-font-smoothing: antialiased; 

는 그들은 모두 antialiased 또는 none로 설정해야합니다.

font-weight 스타일을 설정하지 않았고 그 이름으로 상상하는 HelveticaNeueLight 글꼴을 사용하고 있으며 굵게 표시하거나 굵은 체로 표시하지 않고 굵은 글꼴을 사용하고 싶다고 말합니다. 적어도에서 당신은 설정해야합니다 :

font-weight:bold

또한, 문제는 사용중인 사용자 정의 글꼴이 굵은 버전으로 포장되지 않은 가능성이 높습니다. 그러한 경우 브라우저는 일반적으로 사용 가능한 서체를 사용하여 굵은 체를 렌더링해야하는 방법을 '해석'하여 예상치 못한 결과가 발생합니다. 글꼴이 굵게 포함되거나 특정 가중치가 포함되어있는 경우이를 참조 할 수 있습니다.