브라우저에서 Web Open Font Format (Woff)을 지원하는지 여부

브라우저에서 Woff를 지원하는 JS (jQuery)를 감지하고 본문에 클래스를 추가해야하는지 여부를 Javascript로 감지합니다. 다음과 같이 입력하십시오 :브라우저에서 Web Open Font Format (Woff)을 지원하는지 여부

if(woffIsSupported){ 

    $('body').addClass('modern'); 

    }

어떻게 든 가능합니까? 답변 해 주셔서 감사합니다.

출처

2011-09-27 user967165

웹 글꼴을 사용할 수없는 경우 스타일을 추가하고 CSS를 기본 글꼴로 되돌려 놓지 않는 이유는 무엇입니까? – Pointy

그런 폴백의 경우 몇 가지 제한 사항이 있습니다. 예를 들어, 사용자 정의 글꼴을 사용하여 아이콘을 렌더링하는 경우. 이 경우 해결 방법은 (내용과 스타일의 분리를 막음으로써)'content' CSS 속성을 사용하는 것입니다. –

동일한 기능이 필요합니다. 내 웹 응용 프로그램은 기본 Android 2.2 브라우저를 지원해야하며 대체 TTF 글꼴을 사용하지 않습니다. (대신 WOFF를로드하려고합니다.이 형식은 지원되지 않습니다. 결과적으로 모든 텍스트가 보이지 않게됩니다.) –

this post에는 브라우저 기능을 기반으로 지원 여부를 확인하는 isFontFaceSupported이라는 기능이 있습니다 (좋은 방법, 즉 사용자 에이전트 문자열에 의존하지 않음). 기능과 코드가 될 수

복사 : 난 그냥 사용하고 있음을

/*! 
* isFontFaceSupported - v0.9 - 12/19/2009 
* http://paulirish.com/2009/font-face-feature-detection/ 
* 
* Copyright (c) 2009 Paul Irish 
* MIT license 
*/ 

var isFontFaceSupported = (function(){ 


    var fontret, 
     fontfaceCheckDelay = 100; 

     // IE supports EOT and has had EOT support since IE 5. 
     // This is a proprietary standard (ATOW) and thus this off-spec, 
     // proprietary test for it is acceptable. 
    if (!(!/*@[email protected](@_jscript_version>=5)[email protected]@*/0)) fontret = true; 

    else { 

    // Create variables for dedicated @font-face test 
     var doc = document, docElement = doc.documentElement, 
      st = doc.createElement('style'), 
      spn = doc.createElement('span'), 
      wid, nwid, body = doc.body, 
      callback, isCallbackCalled; 

     // The following is a font, only containing the - character. Thanks Ethan Dunham. 
     st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}"; 
     doc.getElementsByTagName('head')[0].appendChild(st); 


     spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

     if (!body){ 
     body = docElement.appendChild(doc.createElement('fontface')); 
     } 

     // the data-uri'd font only has the - character 
     spn.innerHTML = '-------'; 
     spn.id  = 'fonttest'; 

     body.appendChild(spn); 
     wid = spn.offsetWidth; 

     spn.style.font = '99px testfont,_,serif'; 

     // needed for the CSSFontFaceRule false positives (ff3, chrome, op9) 
     fontret = wid !== spn.offsetWidth; 

     var delayedCheck = function(){ 
     if (isCallbackCalled) return; 
     fontret = wid !== spn.offsetWidth; 
     callback && (isCallbackCalled = true) && callback(fontret); 
     } 

     addEventListener('load',delayedCheck,false); 
     setTimeout(delayedCheck,fontfaceCheckDelay); 
    } 

    function ret(){ return fontret || wid !== spn.offsetWidth; }; 

    // allow for a callback 
    ret.ready = function(fn){ 
     (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn); 
    } 

    return ret; 
})();

출처

2011-09-27 13:48:02 Clive

perfect. 고마워요 :) – user967165

질문은 WOFF 지원 감지에 관한 것입니다. 이것은'@ font-face'가 지원되는지 확인합니다 - 만약 제가 맞다면 - 이것은 동일하지 않습니다. 'isWOFFSupported'가 있는지 확인할 수 있습니까? –

그것을 테스트하기 어렵다 때문에 : 여기

if(isFontFaceSupported()) { 
    $('body').addClass('modern'); 
}

은 골대 기능입니다 브라우저 감지 :

//test ie 6, 7, 8 
var div = document.createElement("div"); 
div.innerHTML = "<!--[if lte IE 8]><i></i><![endif]-->"; 
var isIe8orLower = !!div.getElementsByTagName("i").length; 

if (!isIe8orLower && !navigator.userAgent.match(/Opera Mini/i)) { 
    $('body').addClass('modern'); 
}

사용법과 일치합니다 : http://caniuse.com/#feat=woff

출처

2015-10-22 09:44:19

브라우저에서 Web Open Font Format (Woff)을 지원하는지 여부

답변

관련 문제