第一个用于检查 CDN 负载并提供本地回退的 JavaScript 函数

Question

我正在尝试使用 javascript 为字体提供本地回退 - 我不能使用 jQuery，因为它还没有加载，如果可能的话我不想加载像 yepnope 这样的另一个库（加上检查yepnope 中的样式表现在已弃用）。

我没有找到太多关于这类事情的参考资料，而且我不知道任何 javascript，所以我可能使用了错误的搜索词 - 如果这很简单，抱歉。

到目前为止我有：

  <!-- load fonts from cdn -->
  <link href="//fonts.googleapis.com/css?family=Flamenco" rel="stylesheet" type="text/css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css">

  <!-- check fonts loaded via cdn and provide local fallbacks -->
  <script>
    function fontLoaded(href) {
      var fontFound = false;
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (
          sheet['href'] == "//fonts.googleapis.com/css?family=Flamenco" &&
          sheet['href'] == "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
        ) {
          fontFound = true;
        }
      };
      return fontFound;
    }
    if (!fontLoaded('font-awesome.css')) {
      local_fallback = new CustomEvent('link');
      local_fallback.setAttribute("rel", "stylesheet");
      local_fallback.setAttribute("href", "/assets/css/fonts.css");
      document.getElementsByTagName("head")[0].appendChild(local_fallback);
    }
</script>

不用说，它不起作用 - 问题：

• 我在 Firebug 中看到“TypeError: local_fallback.setAttribute is not a function”，所以怀疑这就是替代 font.css 文件未加载的原因 - 对吗？

• 我使用的是 '//' 而不是 'http://' 和 'https//' 这是否适用于 javascript？

• 我不确定如何检查 Google 字体是否未加载 (if (!fontLoaded('font-awesome.css')))，因为 Google 不会加载像 font awesome 这样的特定 css 文件 - 但我认为只检查 fontawesome 是可以的，因为检查两个样式表时的 && 运算符？

我也找到了这个选项，但字体很棒：

<script>
    function loadLocalFonts () {
        var fonts = document.styleSheets;
        for (var i = 0, max = fonts.length; i < max; i++) {
            if (fonts[i].href == "//fonts.googleapis.com/css?family=Flamenco" && "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css")
                return;
        }
        var link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = "/assets/css/fonts.css";

        document.getElementsByTagName("head")[0].appendChild(link);
    }
    loadLocalFonts();
</script>

任何指向正确方向的指针将不胜感激。

Answer 1

好的，主要问题似乎是我从 CDN source 复制了 FontAwesome css，由于某种原因，它在 Firefox 或 Chrome 中无法在本地工作（如在本地 Web 服务器而不是 CDN 中）。

一旦我将完整下载项目中的 FontAwesome css 复制到 local-fonts.css 文件中（并为 Googel 添加了声明），我就能够提供本地回退。

此选项可能更好，因为 javascript 仅用于检查是否通过 CDN 加载字体并提供本地回退 - 即初始 CDN 加载而不需要 javascript：

<!-- load fonts via CDN -->
<link href="//fonts.googleapis.com/css?family=Flamenco" rel="stylesheet" type="text/css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css">

<script>
  // check that fonts loaded via CDN
  function fontLoaded() {
    var cdnFont = false;
    for (var i = 0; i < document.styleSheets.length; i++) {
      var font = document.styleSheets[i];
      if (
        font['href'] == "//fonts.googleapis.com/css?family=Flamenco" &&
        font['href'] == "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
      ) {
        cdnFont = true;
      }
    };
    return cdnFont;
  }

  // if fonts didn't load via CDN, load from local assets directory
  if (!fontLoaded('font-awesome.css')) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "/assets/fonts/local-fonts.css";
    document.getElementsByTagName("head")[0].appendChild(link);
  }
</script>