介绍遇到一个关于检查font-family支持的问题，一时想不起来，于是查了下资料，解决了困惑。顺便在这里总结一下是否支持的检测方法。OriginMyGitHubHTML检测浏览器不编译HTML，直接解析并显示结果，以宽松模式运行。即使使用了错误的语法，浏览器通常有内置的规则来解析写错的标记，页面仍然可以显示。对于比较新的标签，大部分都有对应的JS对象可以检测。不支持脚本检测元素定义脚本未执行时的替代内容。您的浏览器不支持JavaScript！CSS检测通过样式对象判断，获取样式对象的属性值是否为字符串。typeofdocument.body.style.width//stringtypeofdocument.body.style.test//undefinedsupports方法浏览器原生提供的CSS对象中有一个supports方法，用于检测浏览器是否支持给定的CSS规则并返回一个布尔值。需要注意的是，并非所有浏览器都支持window.CSS对象。window.CSS.supports("display:flex")//truewindow.CSS.supports("display:test")//falsewindow.CSS.supports("display","flex")//truewindow.CSS.supports("display","test")//falseModernizr是一个检测对HTML5和CSS3功能的支持的库。事件检测可以创建一个元素对象，然后检查对象中是否有对应的属性。functionisSupportEvent(eventName){if(typeofeventName!=='string'){console.log('事件名称不合法！');返回;}varelement=document.createElement('div');eventName='on'+eventName;varisSupport=Boolean（元素中的事件名称）；returnisSupport;}浏览器模型对象检测都在window对象上，直接获取即可判断。对于支撑对象，只是支撑对象拥有的一些方法以类似的方式进行判断。functionisSupportObject(objName){if(typeofobjName!=='string'){console.log('对象名称不合法！');返回;}returnBoolean(window[objName]);}思路是：初始化一个字符串，设置一个通用字体，获取它的渲染宽度，然后设置要检测的字体，获取渲染宽度，比较两个宽度，相同说明不支持，不同描述支持。也有这种思路。functionisSupportFontFamily(font){if(typeoffont!=='string'){console.log('字体名称不合法！');返回;}可变宽度；varbody=document.body;varcontainer=document.createElement('span');container.innerHTML=Array(10).join('wi');container.style.cssText=['position:absolute','width:auto','font-size:128px','left:-99999px'].join('!important;');vargetWidth=function(fontFamily){container.style.fontFamily=fontFamily;body.appendChild（容器）；width=container.clientWidth;body.removeChild（容器）；返回宽度；};varmonoWidth=getWidth('monospace');varserifWidth=getWidth('serif');varsansWidth=getWidth('sans-serif');返回monoWidth!==getWidth(font+',monospace')||sansWidth!==getWidth(字体+',sans-serif')||serifWidth!==getWidth(font+',serif');}参考资料CSS模板的测试常用的HTML5、CSS3新特性能力测试写法检测是否安装了特定字体Checkiffont-familyisHonoredJavaScript检查字体是否可用
CompatibilityRoutineInspection相关文章
