Question

Modernizr检测CSS3字体支持。

http://modernizr.com/download/

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

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

Answer 1

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

您可以在下载部分自定义它，只需要下载所需的支票，因此如果您只需要进行字体测试，则只能下载该部分。

如果出于某种原因你只是不想使用Modernizr，那么名为Paul Irish的前端开发人员已经完成了@font-face Feature Detection，这可能或多或少都是你想要的。希望它有所帮助。

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，没有＆＃t; t支持Windows Phone＆lt; 8，并且不支持浏览器前缀字体 - 如-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']);

Modernizr的字体检查

3 个答案: