为什么 Modernizr 加载 Google 字体？

Question

我正在构建一个 Web 应用程序并刚刚安装了 ssl。

除了通过不安全的连接加载字体时遇到的这两个错误之外，一切似乎都很好。控制台表明这是 Modernizr 正在做的事情，但我不知道在哪里以及如何修复它。

这是控制台输出：

The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4

我实际上是在使用 TypeKit 作为我的字体，所以我不知道这些 Google 字体在页面上的作用以及为什么 Modernizr 会加载它们。

Answer 1

在modernizr 的完整版本中，对@font-face 的CCS3 支持进行了测试。我相信这个测试代码加载一些字体只是为了看看它是否有效。

如果您不需要，请使用modernizr 页面上的构建配置器将其从您的自定义构建库中排除。

顺便说一句，新版本的modernizr 似乎通过SSL 加载字体。

modernizr 2.8.3 中的测试代码

/*>>fontface*/
// @font-face detection routine by Diego Perini
// javascript.nwbox.com/CSSSupport/

// false positives:
//   WebOS github.com/Modernizr/Modernizr/issues/342
//   WP7   github.com/Modernizr/Modernizr/issues/538
tests['fontface'] = function() {
    var bool;

    injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
      var style = document.getElementById('smodernizr'),
          sheet = style.sheet || style.styleSheet,
          cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';

      bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
    });

    return bool;
};
/*>>fontface*/

// CSS generated content detection
tests['generatedcontent'] = function() {
    var bool;

    injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
      bool = node.offsetHeight >= 3;
    });

    return bool;
};