0

Modernizr は、CSS3 font-face サポートを検出します。

http://modernizr.com/download/

font-facemodernizr の外部でテストのソースのみを取得するにはどうすればよいですか?

このテストに関連するファイルがリポジトリにありますが、使用方法がわかりません https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/fontface.js

4

3 に答える 3

0

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']);
于 2015-07-18T08:08:57.237 に答える
0

これを試してください：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 はサポートされず、 -webkit-font-face のように接頭辞付きのフォントフェイスをサポートしていません)。

于 2014-11-20T23:32:24.860 に答える
0

そのファイルは、Modernizr の残りの部分から切り離すのは簡単ではないようです。私の意見では、実際に行って Modernizr を使用する方がはるかに簡単です。

ダウンロード セクションで、必要なチェックのみをダウンロードするようにカスタマイズできます。そのため、font-face テストのみが必要な場合は、その部分のみをダウンロードします。

何らかの理由で Modernizr を使用したくない場合は、Paul Irish というフロントエンド開発者が@font-face 機能検出を行っています。これは、多かれ少なかれあなたが探しているものである可能性があります。それが役立つことを願っています。

于 2013-05-04T23:10:11.663 に答える