Modernizr 的字体检查答案

【问题标题】：Font-face check from ModernizrModernizr 的字体检查
【发布时间】：2013-05-04 22:22:00
【问题描述】：

Modernizr 检测到 CSS3 字体支持。

http://modernizr.com/download/

如何在modernizr 之外仅获取font-face 测试的来源？

repo 中有一个与此测试相关的文件，但我不知道如何使用它 https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/fontface.js

【问题讨论】：

标签： javascript font-face modernizr browser-feature-detection

【解决方案1】：

该文件似乎并不容易与 Modernizr 的其余部分分离。在我看来，实际使用 Modernizr 会容易得多。

您可以在下载部分对其进行自定义，只下载您需要的检查，因此如果您只需要字体测试，则只需下载该部分。

如果出于某种原因您不想使用 Modernizr，一位名叫 Paul Irish 的前端开发人员已经完成了 @font-face Feature Detection，这可能或多或少是您正在寻找的。希望对您有所帮助。

【讨论】：

【解决方案2】：

试试这个：http://jsbin.com/litava/3/edit

以下代码应该可以工作。我建议你真的应该使用 Modernizr，因为他们正确测试他们的实现，并且他们维护它。

// supportsFontFace released to public domain by Robocat. Thanks are also due to Modernizr and the number 9
function supportsFontFace() {

  function blacklist() {
    var match = /(WebKit|windows phone.+trident)\/(\d+)/i.exec(navigator.userAgent);
    return match && parseInt(match[2], 10) < (match[1] == 'WebKit' ? 533 : 6);
  }

  function hasFontFaceSrc() {
    var style = document.getElementById('fontsupporttest');
      var sheet = style.sheet || style.styleSheet;
      var cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
      return /src/i.test(cssText);
  }

  return !blacklist() && hasFontFaceSrc();
}

并添加以下样式：

<style id=fontsupporttest>@font-face{font-family:"font";src:url("https://")}</style>

我重写了它，因此它没有任何版权问题，并对其进行了一些简化，使其不那么保守地列入黑名单（不支持任何低于 523 的 webkit，这也阻止了 webos，不支持 windows phone

【讨论】：

【解决方案3】：

使用 Gulp 自定义构建 Modernizr：

gulpfile.js

'use strict';

var modernizr = require('gulp-modernizr');

gulp.task('modernizr', function() {
  gulp.src(path.resolve(require.resolve('modernizr'), '../../**/*.js'))
    .pipe(modernizr('modernizr.js', {
      tests: [
        'fontface',
      ],
    }))
    .pipe(gulp.dest('app/src/js'));
});

gulp.task('default', ['modernizr']);

【讨论】：