Firefox에서 글꼴 아이콘을 부드럽게하는 방법이 있습니까?

Question

아이콘을 사용하고 있습니다. 크롬과 오페라에서는 괜찮아 보입니다. 하지만 파이어 폭스를 사용하면 아이콘의 font-size이 20px보다 작고 30px 이후는 부드럽게 보입니다. 이 문제를 해결할 수있는 방법이 있습니까?
예를 들어 Firefox의 이미지 크기가 조정되어 이미지가 흐려지는 문제는 아주 작은 양의 이미지를 회전하여 수정할 수 있습니다. 비슷한 글꼴 아이콘에 적용 할 수 있습니까?

어떻게 보이는지 보려면 (멋진 글꼴과 같은) 아이콘이있는 모든 웹 사이트로 가서 (firefox를 사용하여) 크기를 20px로 조정하고 얼마나 흐리게 보이는지보십시오.

Answer 1

브라우저에서 사용하는 글꼴 렌더링에서 문제가 발생했습니다. 플랫폼마다 다른 방법을 사용합니다. 브라우저는 OS 방법 또는 자체 구현을 사용합니다.

Chrome에서 더 좋아 보이는 이유는 Chrome이 Windows에서 ClearType을 구독하지 않기 때문입니다. IE와 파이어 폭스 모두이 도구를 사용합니다 (시작 -> 조정 ClearType Text를 확인하고 차이점을보기 위해 켜고 끕니다). 그러나 맥과 리눅스의 파이어 폭스는 윈도우 전용 기술이기 때문에 그것을 사용하지 않을 것이다.

클리어 타입을 사용하지 않으므로 Chrome은이 세 가지 플랫폼 모두에서 DirectWrite을 사용하기 때문에이 특정 문제를 해결할 수 있습니다. 즉, 어떤 OS를 사용하든 상관없이 은이 Chrome에서 동일해야합니다.

왜이 점이 중요합니까? 왜냐하면 당신은 사용자의 컴퓨터를 제어 할 수 없기 때문입니다. ClearType을 강제로 끌 수 없으면 사용자의 ClearType 설정을 변경할 수 없습니다. 사용자가 text-shadow을 사용하여 수행 할 수있는 세부 묘사를 망쳐 버리면 ClearType 설정을 변경할 수 있습니다.

당신은 이것을 위해 cufon을 사용하면 더 나은 행운을 얻을 수 있지만 결코 확실한 것은 아닙니다.

내가 갈 방법은이 아이콘에 이미지를 사용하는 것입니다. 그렇게하면 아이콘을보기 위해 무엇을 사용하든 관계없이 모두에게 똑같이 적용된다는 것을 확실히 알게 될 것입니다.

Answer 2

OS X의 좋은 점은 텍스트 렌더링 및 스무딩 속성을 사용하는 것입니다.

body { 
text-rendering: auto; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 

웹 글꼴의 경우에도 잘 작동합니다.

Answer 3

가끔 Google 글꼴을 사용할 때 글꼴 스타일이 무시되고 글꼴이 굵게 표시된다는 사실을 발견했습니다. 이 콤보는 나를 위해 잘 작동했습니다.

.element { 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-style: normal !important; 
}