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

我正在尝试使用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>

---

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

好吧，主要问题似乎是我从CDN复制了css，但由于某种原因，CDN在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>

//检查通过CDN加载的字体
函数fontLoaded（）{
var cdnFont=false；
for（var i=0；i

为什么不直接使用onload事件？感谢@Givi的链接，它看起来既漂亮又简单，但是页面上还声明它是HTML5候选推荐，同样适用于HTML5。看起来样式表加载和错误事件并没有得到广泛支持，或者是有缺陷的？有没有办法通过修改我发布的一个示例来做到这一点，或者我是不是偏离了目标？好吧，看来最后一个代码示例实际上正在工作，问题是FontAwesome不会显示在Chrome或Firefox中（我使用一个直接的本地链接标记来测试本地加载）-Safari工作正常，我可以将FontAwesome加载视为一种资源。我已经尝试了从同一个域本地加载的.htaccess for Firefox位，因此我确信这不是问题所在-有没有其他人在Firefox和Chrome中看到过这一点？澄清：Fontawesome实际上正在Firefox中加载，只是没有显示。我已经尝试了通常的.htaccess Firefox修复程序，但在此之后，字体是从同一台服务器（MAMP）加载的，所以没有什么区别。嗯，当CDN不可用时（如果我关闭网络），上面的方法肯定非常有效，但我注意到，当CDN可用时，本地和CDN字体都会加载。有人能帮我处理最后一个if语句吗？它似乎总是正确的？第一个if语句的计算结果似乎是错误的，即使字体已通过CDN加载，有人知道为什么吗？

<!-- 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>