如何使用javascript检查网页中是否加载了Font Awesome？

Question

我需要检查网页中是否包含 Font Awesome。如果不是，我将使用 javascript 加载它。有点像 facebook sdk 如何检查是否有包含 id "facebook-jssdk" 的脚本元素，如果是，它只是 returns（什么都不做），如果不是，它加载它。我需要为 Font Awesome 这样做。

Answer 1

你可以这样做 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")

Answer 2

这是一个方法，但问问自己为什么要这样做？ 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);

Answer 3

一种不确定的方法是检查 Css 文件是否存在。下面的函数会找到许多变体，例如从 cdn 提供的变体，或者文件名中有“-min”后缀的变体。这不太可能会错误地 return 为真（例如，如果有人创建了一个名为 "font-awesome-extensions.css" 的额外 css 文件）。这种方法更可能出现的问题是，如果字体真棒被捆绑在另一个文件中，那么这将找不到该文件并且错误地 return 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"));

Answer 4

我认为这是检查 font-awesome 的最佳方式，但我不确定它是否比重新加载更慢，即使它存在。

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);
};

如何使用javascript检查网页中是否加载了Font Awesome？

How to check if Font Awesome is loaded in web page with javascript?

javascript

css

font-awesome