Mozilla 한국 커뮤니티

http://server.daybreaker.info/shared/fi ... dering.png
이 이미지는 하나의 HTML element 안에서 출력된 문자열의 서로 다른 부분을 확대해본 것입니다.
위아래가 다를 뿐만 아니라 윗쪽 이미지에서 2번 등장한 "m"도 다르다는 걸 알 수 있습니다.

일반 가변폭 글꼴로 된 텍스트에서는 이런 현상이 나타나지 않거나 가독성에 영향을 미치지 않을 만큼 미세하게만 발생하는데, 고정폭 글꼴에 대해서는 유독 눈에 띄게 발생합니다.
VGA(아날로그) 방식 입력을 사용한 LCD 모니터들에서 주파수가 안 맞을 때 발생하는 현상과 아주 유사하게, 글자가 출력되는 x 좌표에 따라 anti-aliasing이 미묘하게 달라지네요.
같은 글자가 다르게 렌더링되는 데다 흐려지기까지 하기 때문에 가독성이 아주 나빠집니다.

제 생각에는 파이어폭스의 글꼴 렌더링 엔진이 글자 위치를 계산할 때 너무 정밀하게(?) 해서 subpixel 단위까지 계산해버리는 것 같습니다.

환경은 Window 7 64bit, Firefox 14.0.1이고 그래픽카드는 NVIDIA GTX460 / Driver 301.42 버전을 사용하고 있습니다.

덧: 여기 파일첨부 기능이 안 되는 것 같습니다.;;
아무런 오류 메시지 없이 첨부한 파일이 양식 제출한 결과에 나타나지 않네요.

음...
자문자답이 되어버렸는데, 이게 DirectWrite 기반 렌더링의 원래 특징이군요.
제가 사용하는 고정폭 글꼴에서 특히 문제가 생기는 것 같은데,
about:config에서 gfx.font_rendering.cleartype_params.force_gdi_classic_for_families
항목에 제가 사용하는 고정폭 글꼴(Envy Code R)의 이름을 추가해줌으로써 해결되었습니다.

혹시 비슷한 문제 겪으시는 분들은 참고하세요~


검색 통해 알아낸 부연설명:
Firefox는 윈도비스타/7 환경에서 2가지 방식의 글꼴 렌더링을 지원합니다.
하나는 XP 때부터 사용하던 것과 동일한 GDI 방식 ClearType이고,
새로 추가된 것은 DirectWrite를 이용한 ClearType입니다.
후자가 회전된 글꼴이나 3D transform을 적용한 글자 등에서 훨씬 부드럽게 표현되고, 글꼴에 내장된 kerning 정보 등을 고려해서 정밀하게 렌더링해주는 장점이 있습니다.
하지만 몇몇 글꼴(제가 사용한 것과 같은)에서는 오히려 글자가 흐려지거나 일정치 않게 렌더링되는 문제가 지적되어 있었고, MS에서 DirectWrite를 패치하거나 글꼴을 업데이트하기도 했지만 Firefox에서도 gfx.font_rendering.cleartype_params.force_gdi_classic_for_families 옵션을 통해 일부 글꼴은 강제로 예전 방식 렌더링을 사용할 수 있게 해놓았습니다.
기본값으로 Arial,Consolas,Courier New,Microsoft Sans Serif,Segoe UI,Tahoma,Trebuchet MS,Verdana 이런 글꼴들이 15px 이하 크기에서는 옛날 방식을 사용해서 렌더링됩니다.
혹시 자신이 사용하는 글꼴이 흐려보이거나 할 경우 여기에 추가해주면 됩니다.