메뉴 건너뛰기

Dev tips

JavaScript 자바스크립트로 폰트 설치 유무 확인하기

taknim 2010.04.21 22:37 조회 수 : 12061 추천:8252

http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/http://wodory.com/2269아래 font.js 와 jQuery.js 를 넣고 아래와 같이 코딩

// setup
$(document).ready(
function () {  font.setup(); // run setup when the DOM is ready
});

// 설치 확인
font.isInstalled(fontname); // returns true or falseSimple.


// font.js 소스

var font = (function () {
    var test_string = 'mmmmmmmmmwwwwwww';
    var test_font = '"Comic Sans MS"';
    var notInstalledWidth = 0;
    var testbed = null;
    var guid = 0;
    
    return {
        // must be called when the dom is ready
        setup : function () {
            if ($('#fontInstalledTest').length) return;

            $('head').append('<' + 'style> #fontInstalledTest, #fontTestBed { position: absolute; left: -9999px; top: 0; visibility: hidden; } #fontInstalledTest { font-size: 50px!important; font-family: ' + test_font + ';}</' + 'style>');
            
            
            $('body').append('<div id="fontTestBed"></div>').append('<span id="fontInstalledTest" class="fonttest">' + test_string + '</span>');
            testbed = $('#fontTestBed');
            notInstalledWidth = $('#fontInstalledTest').width();
        },
        
        isInstalled : function(font) {
            guid++;
        
            var style = '<' + 'style id="fonttestStyle"> #fonttest' + guid + ' { font-size: 50px!important; font-family: ' + font + ', ' + test_font + '; } <' + '/style>';
            
            $('head').find('#fonttestStyle').remove().end().append(style);
            testbed.empty().append('<span id="fonttest' + guid + '" class="fonttest">' + test_string + '</span>');
                        
            return (testbed.find('span').width() != notInstalledWidth);
        }
    };
})();