2010-06-20 8 views
3

매끄러운 글꼴은 어떻게 얻을 수 있습니까? 가장자리가 모두 희미하게 보이기를 원하지 않습니다.CSS가있는 매끄러운 글꼴

해키 솔루션은 문제 :

alt text

+0

난 경우 브라우저를 사용자 정의하는 경우,

text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; 

또한 : 텍스트 렌더링 인터넷 익스플로러에서 작동하지만이 코드 조각이 꽤 잘 작동 나도 몰라 나는 CSS3에 'font-smooth : always;'속성이 있다고 생각한다. 나는 그것을 직접 시도하지 않았으므로 그것의 효과에 대해 언급 할 수 없다. –

+0

여기를 보시고 (같은 주제) : http://stackoverflow.com/questions/11487427/font-smoothing/11493510 – Sliq

답변

3

당신은 헤더에 대한 Cufón 같은 일부 글꼴 대체 솔루션을 사용할 수 없습니다, 그러나 그것은 큰 텍스트 블록에 사용하기에 너무 비효율적이다.

브라우저의 글꼴 렌더링을 변경하려는 경우 모두 자체 텍스트 렌더링 루틴을 가지고 있기 때문에 운이별로 없을 것입니다 (하지만 Safari 및 Chrome의 최신 버전은 -webkit-font-smoothing을 참조하십시오).

+0

글씨 크기가 큰 것들을 위해서만 필요합니다. 그래서 큰 글씨는 문제. Cufon이 왜 그렇게 효율적입니까? –

+0

특히 비효율적이지는 않습니다. 브라우저의 기본 텍스트 렌더링 루틴을 사용하면 Canvas 또는 SVG를 사용하여 텍스트를 표시하는 사용자 정의 JavaScript 라이브러리를 사용하는 것보다 항상 빠를 것입니다. –

2

언급했듯이 font-smooth에 대한 CSS 속성이 있지만 이것이 얼마나 광범위하게 지원되는지는 잘 모르겠습니다. 이것은 대부분 OS에서 조정해야 할 속성이거나 글꼴 자체 일 뿐이며 이는 물론 로컬 일뿐입니다. Windows에는 ClearType이라는 기능이있어 모니터에서 제대로 작동하도록 앤티 앨리어싱을 조정할 수 있습니다.

Ben Alpert가 언급했듯이 Cufon 또는 TypeKit과 같은 글꼴 대체 솔루션은 제목 텍스트의 다른 잠재적 솔루션입니다.

1

실제로 브라우저의 Firefox 제품군에서 작동하는 텍스트 렌더링이라는 CSS 속성이 있습니다. Ben이 말했듯이 사파리와 크롬 제품군을위한 웹킷 (font-smoothing) 기능도있다.

html { 
    text-rendering: optimizeLegibility !important; 
    -webkit-font-smoothing: antialiased !important; 
} 
관련 문제