>

Font-Awesome을 사용하고 있지만 글꼴 파일이로드되지 않은 경우 아이콘이 로 표시됩니다.

그래서이 아이콘이 display:none 를 갖기를 원합니다  파일이로드되지 않는 동안

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

이 파일들이로드되었고 아이콘을 표시 할 수 있다는 것을 어떻게 알 수 있습니까?

수정 : 전체 페이지 전에 글꼴을로드 할 수 있기 때문에 페이지가로드 될 때 (onload) 말하지 않습니다.


  • 답변 # 1

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

    본질적으로이 방법은 문자열의 너비를 두 개의 다른 글꼴로 비교하여 작동합니다. 우리는 테스트 할 글꼴로 Comic Sans를 사용하고 있습니다. 왜냐하면 가장 안전한 웹 글꼴이고 사용하게 될 사용자 지정 글꼴과 충분히 다르기 때문입니다. 또한 우리는 매우 큰 글꼴 크기를 사용하므로 작은 차이조차도 분명합니다. Comic Sans 문자열의 너비가 계산되면 font-family가 사용자 정의 글꼴로 변경되고 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

  • 답변 # 2

    Google 및 Typekit에서 개발 한 WebFont Loader (github repo)를 사용해보십시오./p> 이 예는 먼저 텍스트를 기본 serif 글꼴로 표시합니다. 그런 다음 글꼴이로드 된 후 지정된 글꼴로 텍스트를 표시합니다. (이 코드는 다른 모든 최신 브라우저에서 Firefox의 기본 동작을 재현합니다.)

  • 답변 # 3

    다른 솔루션과는 다른 접근 방식이 있습니다.

    FontAwesome 4.1.0을 사용하여 WebGL 텍스처를 만들고 있습니다. 그것은 작은 캔버스를 사용하여 fa-square를 렌더링 한 다음 해당 캔버스의 픽셀을 검사하여로드되었는지 테스트하는 아이디어를 얻었습니다.

    function waitForFontAwesome( callback ) {
       var retries = 5;
       var checkReady = function() {
          var canvas, context;
          retries -= 1;
          canvas = document.createElement('canvas');
          canvas.width = 20;
          canvas.height = 20;
          context = canvas.getContext('2d');
          context.fillStyle = 'rgba(0,0,0,1.0)';
          context.fillRect( 0, 0, 20, 20 );
          context.font = '16pt FontAwesome';
          context.textAlign = 'center';
          context.fillStyle = 'rgba(255,255,255,1.0)';
          context.fillText( '\uf0c8', 10, 18 );
          var data = context.getImageData( 2, 10, 1, 1 ).data;
          if ( data[0] !== 255 && data[1] !== 255 && data[2] !== 255 ) {
             console.log( "FontAwesome is not yet available, retrying ..." );
             if ( retries > 0 ) {
                setTimeout( checkReady, 200 );
             }
          } else {
             console.log( "FontAwesome is loaded" );
             if ( typeof callback === 'function' ) {
                callback();
             }
          }
       }
       checkReady();
    };
    
    

    캔버스를 사용할 때 상당히 현대적인 브라우저가 필요하지만, polyfill과 함께 IE8에서도 작동 할 수 있습니다.

  • 답변 # 4

    @ font-face가 이미로드되어 있는지 확인하는 다른 방법이 있습니다. 타이머를 전혀 사용할 필요가 없습니다. "스크롤"이벤트를 활용하여 정교하게 제작 된 요소의 크기가 변경 될 때 즉각적인 이벤트를받습니다.

    어떻게했는지에 대한 블로그 게시물을 작성하고 Github에 라이브러리를 게시했습니다.

  • 답변 # 5

    같은 것을 시도하십시오

    $(window).bind("load", function() {
           $('#text').addClass('shown');
    });
    
    

    그런 다음

    #text {visibility: hidden;}
    #text.shown {visibility: visible;}
    
    

    글꼴이로드 된 후로드 이벤트가 시작되어야합니다.

관련 자료

  • 이전 Android Reverse geocoding - android - 역 지오 코딩 :getfromlocation
  • 다음 while 루프 내에서 bash에서 입력 읽기