GitHub で公開: https://github.com/patrickmarabeas/jQuery-FontSpy.js
基本的に、この方法は、2 つの異なるフォントの文字列の幅を比較することによって機能します。テスト対象のフォントとして Comic Sans を使用しています。これは、Web セーフ フォントの中で最も異なるものであり、使用するカスタム フォントと十分に異なるものであることを願っています。さらに、非常に大きなフォント サイズを使用しているため、わずかな違いでも明らかです。Comic Sans 文字列の幅が計算されると、font-family がカスタム フォントに変更され、Comic Sans にフォールバックされます。オンにすると、文字列要素の幅が同じ場合、Comic Sans のフォールバック フォントが引き続き使用されます。そうでない場合、フォントは動作するはずです。
フォント読み込み検出の方法を jQuery プラグインに書き直して、開発者がフォントが読み込まれているかどうかに基づいて要素のスタイルを設定できるようにしました。カスタム フォントの読み込みに失敗した場合にユーザーがコンテンツなしで放置されないように、フェイル セーフ タイマーが追加されました。それだけ使い勝手が悪い。
また、クラスの追加と削除を含めることで、フォントの読み込み中と失敗時に何が起こるかをより細かく制御できるようになりました。これで、フォントに対して好きなことを行うことができます。フォント サイズ、行間隔などを変更して、代替フォントを可能な限りカスタムに近づけることをお勧めします。これにより、レイアウトが損なわれず、ユーザーが期待どおりのエクスペリエンスを得ることができます。
ここにデモがあります: http://patrickmarabeas.github.io/jQuery-FontSpy.js
以下を .js ファイルに投げて参照します。
(function($) {
$.fontSpy = function( element, conf ) {
var $element = $(element);
var defaults = {
font: $element.css("font-family"),
onLoad: '',
onFail: '',
testFont: 'Comic Sans MS',
testString: 'QW@HhsXJ',
delay: 50,
timeOut: 2500
};
var config = $.extend( defaults, conf );
var tester = document.createElement('span');
tester.style.position = 'absolute';
tester.style.top = '-9999px';
tester.style.left = '-9999px';
tester.style.visibility = 'hidden';
tester.style.fontFamily = config.testFont;
tester.style.fontSize = '250px';
tester.innerHTML = config.testString;
document.body.appendChild(tester);
var fallbackFontWidth = tester.offsetWidth;
tester.style.fontFamily = config.font + ',' + config.testFont;
function checkFont() {
var loadedFontWidth = tester.offsetWidth;
if (fallbackFontWidth === loadedFontWidth){
if(config.timeOut < 0) {
$element.removeClass(config.onLoad);
$element.addClass(config.onFail);
console.log('failure');
}
else {
$element.addClass(config.onLoad);
setTimeout(checkFont, config.delay);
config.timeOut = config.timeOut - config.delay;
}
}
else {
$element.removeClass(config.onLoad);
}
}
checkFont();
};
$.fn.fontSpy = function(config) {
return this.each(function() {
if (undefined == $(this).data('fontSpy')) {
var plugin = new $.fontSpy(this, config);
$(this).data('fontSpy', plugin);
}
});
};
})(jQuery);
プロジェクトに適用する
.bannerTextChecked {
font-family: "Lobster";
/* don't specify fallback font here, do this in onFail class */
}
$(document).ready(function() {
$('.bannerTextChecked').fontSpy({
onLoad: 'hideMe',
onFail: 'fontFail anotherClass'
});
});
そのFOUCを取り除け！
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
/* fall back font */
/* necessary styling so fallback font doesn't break your layout */
}
編集: FontAwesome の互換性は、適切に動作せず、異なるバージョンで問題が発生したため削除されました。ハック修正はこちらにあります: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1