잘못된 글꼴 렌더링 - 원인은 무엇이며, 그 해결 방법은 무엇입니까?

Question

나는 Bebas Neue 활자체를 집중적으로 사용하는 웹 사이트를 구축 중입니다. 내가 종종하는 것처럼, 나는 나를 위해 더러운 일에 FontSquirrel을 놓았다. 그리고 나는 베바 Neue page에서 직접 @font-face 미리 빌드를 다운로드했다.

내 웹 사이트에 다운로드 한 스타일 시트 + 글꼴을 직접 가져 왔습니다. 내가 가지고있는 것은 크롬과 파이어 폭스 같은 거대한 브라우저에서 매우 나쁜 글꼴 렌더링입니다. 다음은 스크린 샷의 무리입니다 : 내가 사방 을 원하는 아주 괜찮은

오페라 (, 그건 :

이

크롬 (아주 나쁜) :

파이어 폭스 (무서운, 내 주 자비)) :

사파리) (완벽한 :

CSS에서 글꼴 렌더링 또는 앤티 앨리어스 옵션을 지정하지 않았습니다. 반면에 나는 normalize.css을 사용합니다.

그런 끔찍한 렌더링의 원인은 무엇일까요?

주 : 나는 이미 하나의 질문에 대한 너무 많은 사진을 게시,하지만 난 너무 Grand Hotel 글꼴을 사용하고 있는데 하나님은 심지어 더 나쁜 (그러나 각 브라우저는, 적어도 일관되게 동작).

Answer 1

내 글꼴에 동일한 문제가있었습니다.

.font-smoothing { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}