从Modernizr检查字体

Font-face check from Modernizr

本文关键字：字体 检查 Modernizr      更新时间：2023-09-26

Modernizr检测CSS3字体支持

http://modernizr.com/download/

如何在现代化设备之外获得font-face测试的源?

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

该文件似乎不容易从Modernizr的其余部分解耦。在我看来，使用Modernizr要容易得多。

您可以在下载部分自定义它，只下载您需要的检查项，所以如果您只需要font-face测试，您将只下载该部分。

如果出于某种原因你不想使用Modernizr，一个叫做Paul Irish的前端开发者已经做了一个@font-face特征检测，这可能或多或少就是你正在寻找的。希望对大家有所帮助。

试试: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>

我重写了它，所以它没有任何版权问题，并简化了它一点，使它黑名单不那么保守(不支持任何webkit低于523，也阻止了webos，不支持windows phone <8、不支持浏览器前缀字体(如-webkit-font-face)。

使用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']);
相关文章：