現在GitHubにあります：https：//github.com/patrickmarabeas/jQuery-FontSpy.js
基本的に、この方法は2つの異なるフォントの文字列の幅を比較することで機能します。Comic Sansは、Webセーフフォントの中で最も異なり、使用するカスタムフォントとは十分に異なるため、テスト対象のフォントとして使用しています。さらに、非常に大きなフォントサイズを使用しているため、わずかな違いでも明らかになります。Comic Sans文字列の幅が計算されると、font-familyはカスタムフォントに変更され、ComicSansにフォールバックします。チェックすると、文字列要素の幅が同じ場合、ComicSansの代替フォントが引き続き使用されます。そうでない場合は、フォントが機能しているはずです。
フォントの読み込みを検出する方法を、フォントが読み込まれたかどうかに基づいて要素のスタイルを設定できるように設計された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";
}
$(document).ready(function() {
$('.bannerTextChecked').fontSpy({
onLoad: 'hideMe',
onFail: 'fontFail anotherClass'
});
});
そのFOUCを削除してください！
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
}
編集：FontAwesomeの互換性は、正しく機能せず、異なるバージョンで問題が発生したため削除されました。ハッキーな修正はここで見つけることができます：https：//github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1