(폰트 얼굴 @) 글꼴이 이미로드 된 경우 어떻게 알고?

해결법

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

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

기본적으로 방법은 두 개의 서로 다른 글꼴 문자열의 폭을 비교하여 작동합니다. 당신이 사용하게 될 사용자 지정 글꼴을 충분히 웹 안전 글꼴의 대부분을 다른 희망이 다르기 때문에 우리는 테스트 할 글꼴로 만화 SAN을 사용하고 있습니다. 또한 우리는 너무도 작은 차이가 명백 할 것이다 매우 큰 글꼴 크기를 사용하고 있습니다. 코믹 산세 문자열의 폭이 계산되면, 글꼴 - 가족 만화 산세에 대체하여, 사용자 정의 글꼴로 변경됩니다. 이 옵션을 선택하면 문자열 요소의 폭이 동일한 경우, 코믹 산세의 대체 글꼴 사용에 아직도있다. 그렇지 않다면, 당신의 글꼴을 운영해야한다.

개발자에게 폰트가로드되었는지의 여부에 따라 스타일 요소에 대한 기능을 제공하도록 설계된 플러그인 내가 jQuery를에 글꼴 부하 검출 방법을 다시 썼다. A는 사용자 정의 글꼴로드에 실패 할 경우 사용자가 내용없이 남아 있지 않도록 안전 타이머가 추가되었습니다 실패합니다. 그건 그냥 나쁜 유용성입니다.

또한 글꼴로드하는 동안 발생하는 이상과 클래스 추가 및 제거를 포함 실패에 더 큰 컨트롤을 추가했습니다. 당신은 지금 당신이 글꼴을 원하는대로 할 수 있습니다. 난 단지 그대로 레이아웃 숙박 그래서 가능한 사용자 정의에 가까운 당신의 가을 다시 글꼴을 얻을 수있는 글꼴 크기, 줄 간격 등을 수정하는 것이 좋습니다, 사용자는 예상되는 경험을 얻을.

여기 데모는 다음과 같습니다 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.구글과 Typekit에 의해 개발 WebFont 로더 (github의의 REPO)를보십시오.

구글과 Typekit에 의해 개발 WebFont 로더 (github의의 REPO)를보십시오.

이 예제에서는 첫 번째 표시 serif 글꼴 기본 텍스트를; 다음 글꼴을로드 한 후 지정된 폰트의 텍스트를 표시합니다. (이 코드는 다른 모든 최신 브라우저에서 파이어 폭스의 기본 동작을 재현합니다.)

3.여기에 다른 사람의 솔루션에 대한 다른 접근 방식이다.

여기에 다른 사람의 솔루션에 대한 다른 접근 방식이다.

나는 WebGL을 텍스처를 구축 FontAwesome 4.1.0을 사용하고 있습니다. 그 날은로드 여부를 테스트에 그 캔버스에 픽셀을 확인 후,에 FA-사각형을 렌더링하기 위해 작은 캔버스를 사용하는 생각을했다 :

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.여기 @ 글꼴 얼굴은 이미 모두에서 타이머를 사용하지 않고로드 된 경우 알 수있는 또 다른 방법이다 : 신중하게 제작 된 요소의 크기가 변경 될 때 순간적인 이벤트를 수신하기 위해 "스크롤"이벤트를 활용합니다.

여기 @ 글꼴 얼굴은 이미 모두에서 타이머를 사용하지 않고로드 된 경우 알 수있는 또 다른 방법이다 : 신중하게 제작 된 요소의 크기가 변경 될 때 순간적인 이벤트를 수신하기 위해 "스크롤"이벤트를 활용합니다.

나는 당신이 일을 끝낼와 Github에서의 라이브러리를 게시 한 방법에 대한 블로그 포스트를 작성했습니다.
5.사실,이 모든 글꼴 다운로드를 시작하거나 몇 가지 오류에 빠지지 완전히 여부 및로드 이해하는 좋은 방법이지만, 단지 특정 글꼴, 다음 코드를 지불 관심되지 않습니다 :

사실,이 모든 글꼴 다운로드를 시작하거나 몇 가지 오류에 빠지지 완전히 여부 및로드 이해하는 좋은 방법이지만, 단지 특정 글꼴, 다음 코드를 지불 관심되지 않습니다 :
```
document.fonts.onloading = () => {
  // do someting when fonts begin to download
};
```
```
document.fonts.onloadingdone = () => {
  // do someting when fonts are loaded completely
};
```
```
document.fonts.onloading = () => {
  // do someting when fonts fall into some error
};
```
또한 반환 약속하고 그 때는 기능을 처리 할 수 있다는 옵션이 있습니다 :
```
document.fonts.ready
 .then(() => console.log('do someting at the final with each status'))
```

6.같은 시도

같은 시도

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

다음 할

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

폰트가로드 된 후로드 이벤트가 발생한다.

7.이것은 적어도 영업 이익에 해당 글꼴 - 끝내로드, NOT 완벽한 솔루션을 보장 다른 접근 방식이다. 원래 코드는 여기 https://wordpress.stackexchange.com/a/165358/40636 워드 프레스 포럼에 발견했다.

이것은 적어도 영업 이익에 해당 글꼴 - 끝내로드, NOT 완벽한 솔루션을 보장 다른 접근 방식이다. 원래 코드는 여기 https://wordpress.stackexchange.com/a/165358/40636 워드 프레스 포럼에 발견했다.

그것은 무신론자이고 글꼴 멋진 글꼴 - 가족 확인할 수 있습니다와 같은 모든 글꼴 스타일 리소스와 작동합니다. 좀 더으로 나는이 훨씬 더에 적용 할 수있는 걸 생각 ...
```
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    (function($){
        var faSpan = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if (faSpan .css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
        }
        faSpan.remove();
    })(jQuery);
</script>
```

8.아래의 코드를 사용 :

아래의 코드를 사용 :

<!DOCTYPE HTML>
<html>
    <head>
    </head>

<body>
<canvas id="canvasFont" width="40px" height="40px" style="position: absolute; display: none;"></canvas>

<script>
function IsLoadedFonts()
    {
        var Args = arguments;
        var obj = document.getElementById('canvasFont');
        var ctx = obj.getContext("2d");
        var baseFont = (/chrome/i.test(navigator.userAgent))?'tims new roman':'arial';
         //................
          function getImg(fon)
          { 
            ctx.clearRect(0, 0, (obj).width, (obj).height);
            ctx.fillStyle = 'rgba(0,0,0,1.0)';
            ctx.fillRect( 0, 0, 40, 40 );
            ctx.font = '20px '+ fon;
            ctx.textBaseline = "top";
            ctx.fillStyle = 'rgba(255,255,255,1.0)';
            ctx.fillText( '\u0630', 18, 5 );
            return ctx.getImageData( 0, 0, 40, 40 );
          };
        //..............
          for(var i1=0; i1<Args.length; i1++)
          {
            data1 = getImg(Args[i1]);
            data2 = getImg(baseFont);
            var isLoaded = false;
            //...........
            for (var i=0; i<data1.data.length; i++)
            {
                if(data1.data[i] != data2.data[i])
                    {isLoaded = true; break;}
            }
            //..........
            if(!isLoaded)
                    return false;
         }
         return true;
    };

     setTimeout(function(){alert(IsLoadedFonts('myfont'));},100);
   </script>
   </body>

많은 글꼴을 확인할 수 있습니다 :

setTimeout(function(){alert(IsLoadedFonts('font1','font2','font3'));},100);

아래의 코드는 오페라에서 작동하지만 간단합니다 :

if(!document.defaultView.getComputedStyle(document.getElementById('mydiv'))['fontFamily'].match(/myfont/i))
          alert("font do not loaded ");

from https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를에 인덱스 요소를 가져옵니다 (0)	2020.10.13
[JQUERY] jQuery로 iframe이 새로 고침 (0)	2020.10.13
[JQUERY] 왜 객체에 대해서 typeof 배열은 "개체"가 아닌 "배열"를 반환합니까? [복제] (0)	2020.10.13
[JQUERY] 어떻게 자바 스크립트를 사용하여 링크를 만들려면 어떻게해야합니까? (0)	2020.10.13
[JQUERY] 어떻게 페이지의 특정 요소로 이동합니다? [복제] (0)	2020.10.13

복붙노트

[JQUERY] (폰트 얼굴 @) 글꼴이 이미로드 된 경우 어떻게 알고?

(폰트 얼굴 @) 글꼴이 이미로드 된 경우 어떻게 알고?

해결법

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

2.구글과 Typekit에 의해 개발 WebFont 로더 (github의의 REPO)를보십시오.

3.여기에 다른 사람의 솔루션에 대한 다른 접근 방식이다.

4.여기 @ 글꼴 얼굴은 이미 모두에서 타이머를 사용하지 않고로드 된 경우 알 수있는 또 다른 방법이다 : 신중하게 제작 된 요소의 크기가 변경 될 때 순간적인 이벤트를 수신하기 위해 "스크롤"이벤트를 활용합니다.

5.사실,이 모든 글꼴 다운로드를 시작하거나 몇 가지 오류에 빠지지 완전히 여부 및로드 이해하는 좋은 방법이지만, 단지 특정 글꼴, 다음 코드를 지불 관심되지 않습니다 :

6.같은 시도

7.이것은 적어도 영업 이익에 해당 글꼴 - 끝내로드, NOT 완벽한 솔루션을 보장 다른 접근 방식이다. 원래 코드는 여기 https://wordpress.stackexchange.com/a/165358/40636 워드 프레스 포럼에 발견했다.

8.아래의 코드를 사용 :

'JQUERY' 카테고리의 다른 글

티스토리툴바