Font Smoothing Detection 소개
간단히 말하자면 윈도우로 치면 클리어타입같은 효과가 활성화 되어 있는지 아닌지를 판단해서 사용자들이 웹페이지에 방문했을때 깨어진 글꼴 표기를 방지하는 것이다.
MAC의 OSX는 미려한 글자를 보여주지만 XP와 같은 구버전의 운영체제에서는 위 그림과 같이 나타날수 있다.
- js 라이브러리를 이용해 이를 Modernizr처럼 html의 클래스에 활성화/비활성화 여부를 나타낼 수 있다.
- canvas를 이용해서 글꼴을 부드럽게 만드는지 그렇지 않은지를 감지하는 기법이다.
- 클리어타입을 사용하긴 하지만 글꼴이 지나치게 뿌옇게 나오는 경우를 탐지하기 위해서는 사용할 수는 없다.
글꼴 처리 활성화 상태를 Modernizr 처럼 진단하기
Modernizr 처럼 <html> 요소에 fontsmoothing라는 클래스명을 붙인다.
아래의 코드를 Modernizr 로드 이후에 적당한 곳에 붙여넣거나 링크시킨다.
// The following is adapted from...
/*
* TypeHelpers version 1.0
* Zoltan Hawryluk, Nov 24 2009.
*
* Released under the MIT License. http://www.opensource.org/licenses/mit-license.php
*
*/
Modernizr.addTest('fontsmoothing', function() {
// IE has screen.fontSmoothingEnabled - sweet!
if (typeof(screen.fontSmoothingEnabled) != "undefined") {
return screen.fontSmoothingEnabled;
} else {
try {
// Create a 35x35 Canvas block.
var canvasNode = document.createElement("canvas")
, test = false
, fake = false
, root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
canvasNode.width = "35";
canvasNode.height = "35"
// We must put this node into the body, otherwise
// Safari Windows does not report correctly.
canvasNode.style.display = "none";
root.appendChild(canvasNode);
var ctx = canvasNode.getContext("2d");
// draw a black letter "O", 32px Arial.
ctx.textBaseline = "top";
ctx.font = "32px Arial";
ctx.fillStyle = "black";
ctx.strokeStyle = "black";
ctx.fillText("O", 0, 0);
// start at (8,1) and search the canvas from left to right,
// top to bottom to see if we can find a non-black pixel. If
// so we return true.
for (var j = 8; j <= 32; j++) {
for (var i = 1; i <= 32; i++) {
var imageData = ctx.getImageData(i, j, 1, 1).data;
var alpha = imageData[3];
if (alpha != 255 && alpha != 0) {
test = true; // font-smoothing must be on.
break;
}
}
}
//clean up
root.removeChild(canvasNode);
if (fake) {
document.documentElement.removeChild(root);
}
return test;
}
catch (ex) {
root.removeChild(canvasNode);
if (fake) {
document.documentElement.removeChild(root);
}
// Something went wrong (for example, Opera cannot use the
// canvas fillText() method. Return false.
return false;
}
}
});
Font Smoothing Detection 사용 예
일종의 예시로 아래와 같이 활성화/비활성화 여부를 출력해서 보여줄 수 있다.
<p id="statusMsg"></p>
$(function(){
$('#statusMsg').html("Your computer "+
(Modernizr.fontsmoothing? "has": "does not have")+
" font smoothing enabled.");
});
fontsmoothing 클래스를 이용해 글꼴을 지정할 수 있다.
#statusMsg {
font-size: 18px;
padding: 1em;
}
.no-fontsmoothing #statusMsg {
font-family: arial;
}
.fontsmoothing #statusMsg {
font-family: 'Spirax', cursive;
}
'웹개발론 > 크로스브라우징' 카테고리의 다른 글
| Modernizr - 브라우저 기능검사 (9) | 2015.05.21 |
|---|---|
| Respond.js - 미디어쿼리(Media Query) 크로스브라우징 (1) | 2015.05.21 |
| Box Sizing Polyfill - 박스모델 크로스브라우징 (4) | 2015.05.20 |
| CSS3PIE - CSS3 속성 크로스브라우징 (0) | 2015.05.19 |
| Selectivizr - CSS3 선택자 크로스브라우징 (0) | 2015.05.19 |
