引子

碰到检查支持 font-family 的疑问，一时想不出，查了资料后解惑。顺便在此对是否支持的检测方式，进行一些基本的归纳。

• Origin
• My GitHub

HTML 检测

浏览器并不会对 HTML 进行编译，而是直接解析并显示结果，并以宽松模式运行。即使用了错误的语法，浏览器通常都有内建规则来解析书写错误的标记，页面仍然可以显示出来。对于比较新的标签，大都会有对应的 JS 对象可以进行检测。

不支持脚本检测

<noscript> 元素中定义脚本未被执行时的替代内容。

<noscript>Your browser does not support JavaScript!</noscript>

CSS 检测

通过 style 对象

通过获取 style 对象的某个属性值是否为字符串来判断。

typeof document.body.style.width // string
typeof document.body.style.test // undefined

supports 方法

浏览器原生提供 CSS 对象里面有个 supports 方法，用来检测浏览器是否支持给定的 CSS 规则，返回布尔值。
需要注意的是 window.CSS 这个对象并不是所有浏览器都支持。

window.CSS.supports("display: flex") // true
window.CSS.supports("display: test") // false
window.CSS.supports("display", "flex") // true
window.CSS.supports("display", "test") // false

Modernizr 是一个检测是否支持 HTML5 和 CSS3 特性的库。

事件检测

可以创建一个元素对象，然后检查在该对象中，是否有对应的属性。

function isSupportEvent(eventName) {
  if (typeof eventName !== 'string') {
    console.log('Event name is not legal !');
    return;
  }
  var element = document.createElement('div');
  eventName = 'on' + eventName;
  var isSupport = Boolean(eventName in element);
  return isSupport;
}

浏览器模型对象检测

这类都在 window 对象上，直接获取进行判断。对于支持对象，但部分支持对象拥有的方法，类似方式进行判断。

function isSupportObject(objName) {
  if (typeof objName !== 'string') {
    console.log('Object name is not legal !');
    return;
  }
  return Boolean(window[objName]);
}

字体检测

检测字体的思路是：初始化一个字符串，设置通用字体，获取其渲染宽度，然后设置需要检测的字体，获取渲染的宽度，比较两个宽度，相同说明不支持，不同说明支持。类似思路的还有这种方式。

function isSupportFontFamily(font) {
  if (typeof font !== 'string') {
    console.log('Font name is not legal !');
    return;
  }

  var width;
  var body = document.body;

  var container = document.createElement('span');
  container.innerHTML = Array(10).join('wi');
  container.style.cssText = [
    'position:absolute',
    'width:auto',
    'font-size:128px',
    'left:-99999px'
  ].join(' !important;');

  var getWidth = function (fontFamily) {
    container.style.fontFamily = fontFamily;
    body.appendChild(container);
    width = container.clientWidth;
    body.removeChild(container);

    return width;
  };

  var monoWidth  = getWidth('monospace');
  var serifWidth = getWidth('serif');
  var sansWidth  = getWidth('sans-serif');

  return monoWidth !== getWidth(font + ',monospace') || sansWidth !== getWidth(font + ',sans-serif') || serifWidth !== getWidth(font + ',serif');
}

参考资料

• CSS 模块的侦测
• 常用的HTML5、CSS3新特性能力检测写法
• Detect whether a particular font is installed
• Check if font-family is Honored
• JavaScript check if a font is available