javascript - Modernizr 的字体检查

Question

Modernizr 检测 CSS3 字体支持。

http://modernizr.com/download/

我如何只获得font-facemodernizr之外的测试来源？

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

Answer 1

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

你可以在下载部分自定义它，只下载你需要的检查，所以如果你只需要字体测试，你只会下载那部分。

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

Answer 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 < 8，并且不' t 支持浏览器前缀字体，如 -webkit-font-face）。

Answer 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']);