[javascript] 글꼴 (@ font-face)이 이미로드되었는지 확인하는 방법은 무엇입니까?

이제 GitHub에서 : https://github.com/patrickmarabeas/jQuery-FontSpy.js

기본적으로이 방법은 서로 다른 두 글꼴의 문자열 너비를 비교하여 작동합니다. 우리는 Comic Sans를 테스트 할 글꼴로 사용하고 있습니다. 웹 안전 글꼴 중 가장 다르고 사용할 사용자 정의 글꼴과는 충분히 다르기 때문입니다. 또한 우리는 매우 큰 글꼴 크기를 사용하므로 작은 차이도 분명합니다. Comic Sans 문자열의 너비가 계산되면 글꼴 모음이 Comic Sans로 대체되는 사용자 지정 글꼴로 변경됩니다. 선택하면 문자열 요소 너비가 동일하면 Comic Sans의 대체 글꼴이 계속 사용됩니다. 그렇지 않은 경우 글꼴이 작동합니다.

글꼴로드 감지 방법을 개발자에게 글꼴로드 여부에 따라 요소 스타일을 지정할 수있는 기능을 제공하도록 설계된 jQuery 플러그인으로 다시 작성했습니다. 사용자 지정 글꼴이로드되지 않는 경우 사용자가 콘텐츠없이 남아 있지 않도록 안전 타이머가 추가되었습니다. 그것은 단지 나쁜 사용성입니다.

또한 클래스 추가 및 제거를 포함하여 글꼴로드 및 실패시 발생하는 작업에 대한 더 많은 제어를 추가했습니다. 이제 글꼴에 원하는대로 할 수 있습니다. 글꼴 크기, 줄 간격 등을 수정하여 대체 글꼴을 가능한 한 사용자 지정에 가깝게 수정하여 레이아웃이 그대로 유지되고 사용자가 예상되는 경험을 얻을 수 있도록하는 것이 좋습니다.

데모 : http://patrickmarabeas.github.io/jQuery-FontSpy.js

다음을 .js 파일에 넣고 참조하십시오.

(function($) {

    $.fontSpy = function( element, conf ) {
        var $element = $(element);
        var defaults = {
            font: $element.css("font-family"),
            onLoad: '',
            onFail: '',
            testFont: 'Comic Sans MS',
            testString: 'QW@HhsXJ',
            delay: 50,
            timeOut: 2500
        };
        var config = $.extend( defaults, conf );
        var tester = document.createElement('span');
            tester.style.position = 'absolute';
            tester.style.top = '-9999px';
            tester.style.left = '-9999px';
            tester.style.visibility = 'hidden';
            tester.style.fontFamily = config.testFont;
            tester.style.fontSize = '250px';
            tester.innerHTML = config.testString;
        document.body.appendChild(tester);
        var fallbackFontWidth = tester.offsetWidth;
        tester.style.fontFamily = config.font + ',' + config.testFont;
        function checkFont() {
            var loadedFontWidth = tester.offsetWidth;
            if (fallbackFontWidth === loadedFontWidth){
                if(config.timeOut < 0) {
                    $element.removeClass(config.onLoad);
                    $element.addClass(config.onFail);
                    console.log('failure');
                }
                else {
                    $element.addClass(config.onLoad);
                    setTimeout(checkFont, config.delay);
                    config.timeOut = config.timeOut - config.delay;
                }
            }
            else {
                $element.removeClass(config.onLoad);
            }
        }
        checkFont();
    };

    $.fn.fontSpy = function(config) {
        return this.each(function() {
            if (undefined == $(this).data('fontSpy')) {
                var plugin = new $.fontSpy(this, config);
                $(this).data('fontSpy', plugin);
            }
        });
    };

})(jQuery);

프로젝트에 적용

.bannerTextChecked {
        font-family: "Lobster";
        /* don't specify fallback font here, do this in onFail class */
}

$(document).ready(function() {

    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });

});

그 FOUC를 제거하십시오!

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fall back font */
    /* necessary styling so fallback font doesn't break your layout */
}

편집 : 제대로 작동하지 않고 다른 버전에서 문제가 발생하여 FontAwesome 호환성이 제거되었습니다. 해키 수정은 여기에서 찾을 수 있습니다 : https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1