使用Javascript检测浏览器是否支持Web开放字体格式(Woff) [英] Detecting with Javascript whether a Browser supports Web Open Font Format (Woff) or not
本文介绍了使用Javascript检测浏览器是否支持Web开放字体格式(Woff)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我必须使用JS(jQuery)来检测浏览器是否支持Woff,然后将一个类添加到正文中. 像这样:
i have to detect with JS (jQuery) wether a browser supports Woff and then add a class to the body. Something like this:
if(woffIsSupported){
$('body').addClass('modern');
}
这有可能吗?谢谢您的回答.
is this somehow possible? Thank you for your answers.
推荐答案
此帖子称为isFontFaceSupported
,它基于浏览器功能(是否是好的方法,即不依赖用户代理字符串)检查支持.
There's a function on this post called isFontFaceSupported
that checks for support based on browser features (the good way, i.e. not relying on the user agent string).
复制该函数,您的代码即可成为:
Copy that function and your code can become:
if(isFontFaceSupported()) {
$('body').addClass('modern');
}
这是帖子中的功能:
Here is the function from the post:
/*!
* 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 (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/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,T1RUTwALAIAAAwAwQ0ZGIMA92IQAAAVAAAAAyUZGVE1VeVesAAAGLAAAABxHREVGADAABAAABgwAAAAgT1MvMlBHT5sAAAEgAAAAYGNtYXAATQPNAAAD1AAAAUpoZWFk8QMKmwAAALwAAAA2aGhlYQS/BDgAAAD0AAAAJGhtdHgHKQAAAAAGSAAAAAxtYXhwAANQAAAAARgAAAAGbmFtZR8kCUMAAAGAAAACUnBvc3T/uAAyAAAFIAAAACAAAQAAAAEAQVTDUm9fDzz1AAsD6AAAAADHUuOGAAAAAMdS44YAAADzAz8BdgAAAAgAAgAAAAAAAAABAAABdgDzAAkDQQAAAAADPwABAAAAAAAAAAAAAAAAAAAAAwAAUAAAAwAAAAICmgGQAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAEZIRAAAQAAgAC0C7v8GAAABdv8NAAAAAQAAAAAAAAAAACAAIAABAAAAFAD2AAEAAAAAAAAAPAB6AAEAAAAAAAEAAgC9AAEAAAAAAAIABwDQAAEAAAAAAAMAEQD8AAEAAAAAAAQAAwEWAAEAAAAAAAUABQEmAAEAAAAAAAYAAgEyAAEAAAAAAA0AAQE5AAEAAAAAABAAAgFBAAEAAAAAABEABwFUAAMAAQQJAAAAeAAAAAMAAQQJAAEABAC3AAMAAQQJAAIADgDAAAMAAQQJAAMAIgDYAAMAAQQJAAQABgEOAAMAAQQJAAUACgEaAAMAAQQJAAYABAEsAAMAAQQJAA0AAgE1AAMAAQQJABAABAE7AAMAAQQJABEADgFEAEcAZQBuAGUAcgBhAHQAZQBkACAAaQBuACAAMgAwADAAOQAgAGIAeQAgAEYAbwBuAHQATABhAGIAIABTAHQAdQBkAGkAbwAuACAAQwBvAHAAeQByAGkAZwBoAHQAIABpAG4AZgBvACAAcABlAG4AZABpAG4AZwAuAABHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy4AAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAEYATwBOAFQATABBAEIAOgBPAFQARgBFAFgAUABPAFIAVAAARk9OVExBQjpPVEZFWFBPUlQAAFAASQAgAABQSSAAADEALgAwADAAMAAAMS4wMDAAAFAASQAAUEkAACAAACAAAFAASQAAUEkAAFIAZQBnAHUAbABhAHIAAFJlZ3VsYXIAAAAAAAADAAAAAwAAABwAAQAAAAAARAADAAEAAAAcAAQAKAAAAAYABAABAAIAIAAt//8AAAAgAC3////h/9UAAQAAAAAAAAAAAQYAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAA/7UAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAQAEBAABAQEDUEkAAQIAAQAu+BAA+BsB+BwC+B0D+BgEWQwDi/eH+dP4CgUcAIwPHAAAEBwAkREcAB4cAKsSAAMCAAEAPQA/AEFHZW5lcmF0ZWQgaW4gMjAwOSBieSBGb250TGFiIFN0dWRpby4gQ29weXJpZ2h0IGluZm8gcGVuZGluZy5QSVBJAAAAAAEADgADAQECAxQODvb3h/cXAfeHBPnT9xf90wYO+IgU+WoVHgoDliX/DAmLDAr3Fwr3FwwMHgoG/wwSAAAAAAEAAAAOAAAAGAAAAAAAAgABAAEAAgABAAQAAAACAAAAAAABAAAAAMbULpkAAAAAx1KUiQAAAADHUpSJAfQAAAH0AAADQQAA)}";
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;
})();
这篇关于使用Javascript检测浏览器是否支持Web开放字体格式(Woff)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文