Hiện có trên GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js
Về cơ bản, phương pháp hoạt động bằng cách so sánh độ rộng của một chuỗi trong hai phông chữ khác nhau. Chúng tôi đang sử dụng Comic Sans làm phông chữ để thử nghiệm, bởi vì nó là phông chữ khác biệt nhất trong số các phông chữ an toàn trên web và hy vọng đủ khác với bất kỳ phông chữ tùy chỉnh nào bạn sẽ sử dụng. Ngoài ra, chúng tôi đang sử dụng kích thước phông chữ rất lớn vì vậy những khác biệt dù là nhỏ cũng sẽ rõ ràng. Khi chiều rộng của chuỗi Comic Sans đã được tính toán, họ phông chữ được thay đổi thành phông chữ tùy chỉnh của bạn, với dự phòng là Comic Sans. Khi được kiểm tra, nếu chiều rộng phần tử chuỗi giống nhau, thì phông chữ dự phòng của Comic Sans vẫn đang được sử dụng. Nếu không, phông chữ của bạn sẽ hoạt động.
Tôi đã viết lại phương pháp phát hiện tải phông chữ thành một plugin jQuery được thiết kế để cung cấp cho nhà phát triển khả năng định kiểu các phần tử dựa trên việc phông chữ đã được tải hay chưa. Một bộ hẹn giờ an toàn không thành công đã được thêm vào để người dùng không bị bỏ mặc nếu không tải được phông chữ tùy chỉnh. Đó chỉ là khả năng sử dụng kém.
Tôi cũng đã thêm quyền kiểm soát tốt hơn những gì xảy ra trong quá trình tải phông chữ và không thành công với việc bao gồm thêm và xóa các lớp. Bây giờ bạn có thể làm bất cứ điều gì bạn thích với phông chữ. Tôi chỉ khuyên bạn nên sửa đổi kích thước phông chữ, khoảng cách dòng, v.v. để phông chữ thu lại của bạn gần với tùy chỉnh nhất có thể để bố cục của bạn vẫn nguyên vẹn và người dùng có được trải nghiệm như mong đợi.
Đây là bản demo: http://patrickmarabeas.github.io/jQuery-FontSpy.js
Ném phần sau vào tệp .js và tham chiếu nó.
(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);
Áp dụng nó vào dự án của bạn
.bannerTextChecked {
font-family: "Lobster";
}
$(document).ready(function() {
$('.bannerTextChecked').fontSpy({
onLoad: 'hideMe',
onFail: 'fontFail anotherClass'
});
});
Loại bỏ FOUC đó!
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
}
CHỈNH SỬA: Đã xóa khả năng tương thích của FontAwesome vì nó không hoạt động bình thường và gặp sự cố với các phiên bản khác nhau. Có thể tìm thấy bản sửa lỗi hack tại đây: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1