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不是函数”，所以怀疑这就是替换font.css文件未加载的原因 - 是吗？
我使用'//'代替'http：//'＆amp; 'https //'可以使用javascript工作吗？
我不确定如何检查Google字体是否未加载(if (!fontLoaded('font-awesome.css')))，因为Google未加载特定的css文件，如字体真棒 - 但我认为只检查fontawesome是否正常因为和＆amp;＆amp;检查两个样式表时的运算符？

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

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

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

1 个答案: