我需要检查一个网页是否包含Font Awesome。如果不是,我将使用javascript加载它。有点像facebook sdk如何检查是否有一个包含id" facebook-jssdk"的脚本元素,如果是这样它只返回(什么都不做),如果没有它加载它。我需要为Font Awesome做到这一点。
答案 0 :(得分:7)
我认为这是检查字体真棒的最好方法,但是我不确定它是否慢,然后再次加载它,即使它在那里。
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
if ((css(span, 'font-family')) !== 'FontAwesome') {
// add a local fallback
}
document.body.removeChild(span);
};
答案 1 :(得分:3)
一种不确定的方法是检查Css文件是否存在。下面的函数会找到许多变体,例如从cdn提供的变体,或者有一个" -min"文件名中的后缀。这种情况很可能会错误地返回true(例如,有人创建了一个名为&#34的额外css文件; font-awesome-extensions.css")。这种方法的一个更可能的问题是,如果将字体 - awesome捆绑在另一个文件中,那么这将无法找到该文件并错误地返回false。
function findCss(fileName) {
var finderRe = new RegExp(fileName + '.*?\.css', "i");
var linkElems = document.getElementsByTagName("link");
for (var i = 0, il = linkElems.length; i < il; i++) {
if (linkElems[i].href && finderRe.test(linkElems[i].href)) {
return true;
}
}
return false;
}
console.log(findCss("font-awesome"));
答案 2 :(得分:1)
这是一种方式,但问问自己为什么要这样做? source
/**
* Checks if a font is available to be used on a web page.
*
* @param {String} fontName The name of the font to check
* @return {Boolean}
* @license MIT
* @copyright Sam Clarke 2013
* @author Sam Clarke <sam@samclarke.com>
*/
(function (document) {
var calculateWidth, monoWidth, serifWidth, sansWidth, width;
var body = document.body;
var container = document.createElement('div');
var containerCss = [
'position:absolute',
'width:auto',
'font-size:128px',
'left:-99999px'
];
// Create a span element to contain the test text.
// Use innerHTML instead of createElement as it's smaller
container.innerHTML = '<span style="' + containerCss.join(' !important;') + '">' +
Array(100).join('wi') +
'</span>';
container = container.firstChild;
calculateWidth = function (fontFamily) {
container.style.fontFamily = fontFamily;
body.appendChild(container);
width = container.clientWidth;
body.removeChild(container);
return width;
};
// Pre calculate the widths of monospace, serif & sans-serif
// to improve performance.
monoWidth = calculateWidth('monospace');
serifWidth = calculateWidth('serif');
sansWidth = calculateWidth('sans-serif');
window.isFontAvailable = function (fontName) {
return monoWidth !== calculateWidth(fontName + ',monospace') ||
sansWidth !== calculateWidth(fontName + ',sans-serif') ||
serifWidth !== calculateWidth(fontName + ',serif');
};
})(document);
答案 3 :(得分:0)
jquery
您可以这样做
var url = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
check if the css is loaded
if (!$("link[href=url]").length)
//append the link to the head tag if not loaded
$('<link href=url rel="stylesheet">').appendTo("head")