웹마스터 팁

XP계열의 방문자 컴에서 ClearType 글꼴 다듬기 효과 사용 시 영문 폰트(예: tahoma, verdana..)에
마이크로소프트사의 비쥬얼 필터(예: blur, dropshadow, gray, alpha..)가 사용 되면 폰트가 굵고 매우 추하게 보이게 됩니다.



정상적으로 보이는 필터링 된 폰트




ClearType 사용 시 보이는 필터링 된 폰트


이런 현상을 방지하기 위하여 window.screen 오브젝트의 fontSmoothingEnabled 속성을
이용하여 방문자의 글꼴 다듬기 효과 사용여부를 알 수 있습니다. (값: Boolean, 속성: read-only)


== fontSmoothingEnabled 응용의 예 ===================

<script type="text/javascript">
<!--
function getstylesheet() {
        if (iscleartype() == true) {
                document.styleSheets[0].addImport('필터가_사용되지_않는.css');
        }
        else {
                document.styleSheets[0].addImport('필터가_사용된.css');
        }
}

function iscleartype() {
        if (window.screen.fontSmoothingEnabled == true) {
                return true;
        }
        else { return false; }
}

document.onload = getstylesheet();
//-->
</script>

== fontSmoothingEnabled 응용의 예 끝 ================

제 홈페이지에 오시면 예제를 보실 수 있습니다.
글꼴 다듬기를 효과를 끄고 올 때와 키고 올 때의 폰트 효과가 다르게 보입니다.


[참고 자료]

fontSmoothingEnabled Property
- http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/fontsmoothingenabled.asp

ClearType information
- http://www.microsoft.com/typography/ClearTypeInfo.mspx

addImport Method of styleSheet Object
- http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/addimport.asp

Visual Filters and Transitions Reference
- http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/reference.asp