Javascript 来自Modernizer的字体外观检查

Modernizer检测到CSS3字体支持

如何仅获取Modernizer之外的

font-face

测试的源代码

repo中有一个与此测试相关的文件，但我不确定如何使用它

---

该文件似乎不容易与Modernizer的其余部分分离。在我看来，真正去使用现代化会容易得多

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

如果出于某种原因，您只是不想使用Modernizer，那么一位名为Paul Irish的前端开发人员已经完成了一项任务，这可能或多或少就是您所要寻找的。希望它能有所帮助。

试试这个：

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

// 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();
}

//Robocat将supportsFontFace发布到公共域。也要感谢Modernizer和数字9
函数支持sfontface（）{
函数黑名单（）{
var match=/（WebKit | windows phone.+trident）\/（\d+）/i.exec（navigator.userAgent）；
返回match&parseInt（match[2]，10）<（match[1]='WebKit'？533:6）；
}
函数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 | |“”：“”；
返回/src/i.test（cssText）；
}
return！blacklist（）和&hasFontFaceSrc（）；
}

并添加以下样式：

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

@font-face{font-family:font；src:url（“https://”）}

---

我重新编写了它，这样它就不会有任何版权问题，并对它进行了一些简化，使它的黑名单不那么保守（不支持523以下的任何webkit，这也会阻止webos，不支持windows phone<8，也不支持浏览器前缀字体，如-webkit字体）。

自定义构建Modernizer，包括：

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