我正在尝试为所有bootstrap 4代码提供备用。我还没弄清楚的唯一一个就是使用JavaScript的字体。

我找到了一些代码,但是它很旧,不能用在fontawesome上。我不确定fontawesome使用哪些元素来检查后备本地副本?

<head>
  <!-- Bootstrap CSS CDN -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <!-- APP CONTENT -->


     <!-- jQuery UI CDN --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
   <!-- jQuery UI local fallback --><script type="text/javascript">(window.jQuery.ui === undefined) && document.write( '<script src="./js/jqueryui/jquery-ui.min.js"><\/script>')</script>



<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery local fallback --><script>window.jQuery || document.write('<script src="js/3.3.1/jquery-3.3.1.min.js"><\/script>')</script>
<!-- popper CDN --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<!-- popper local fallback --><script>if(typeof(Popper) === 'undefined') {document.write('<script src="js/bootstrap4/1.14.7/popper.min.js"><\/script>')}</script>
<!-- Bootstrap JS CDN --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback --><script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="js/bootstrap4/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback --><div id="bootstrapCssTest" class="hidden"></div>
  <script>
    $(function() {
      if ($('#bootstrapCssTest').is(':visible')) {
        $("head").prepend('<link rel="stylesheet" href="css/bootstrap4/bootstrap.min.css">');//add local version if cdn down
      }
    });

/////////////// This doesn't work if I try to load fontawesome/////////////////
   if (typeof bootstrapcdn == "undefined") {
        document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
        if (typeof cloudflare == "undefined") {
            document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="css/fontawesome5.7.2/css/all.css" /%3E'));
        }
        else {
            alert('loading from cloudflare cdn');
        }
   } else {
        alert('loading from bootstrap cdn');
   }




/////I also tried ////////////////////////////////////////
function isFontAwesomeLoaded() {
    var span = document.createElement('span');
    span.className = 'fa';
    document.body.appendChild(span);
    var result = (span.style.fontFamily === 'FontAwesome');
    document.body.removeChild(span);
    return result;
}
alert(isFontAwesomeLoaded()); // always returns false even when fontawesome loads



///and this//////////////////////
window.onload = function () {
  var span = document.createElement('span'),
    headHTML = document.head.innerHTML;

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  //if 'FontAwesome' didn't load, add a local fallback link to the head
  if (span.style.fontFamily !== 'FontAwesome') {
    headHTML += '<link rel="stylesheet" href="css/fontawesome5.7.2/css/all.css">';
    document.head.innerHTML = headHTML;
    alert("didntload")
  }

  document.body.removeChild(span);
};

最佳答案

对于任何CDN,如果找不到缓存的资产,则请求将直接发送到原始服务器。您无需手动添加后备机制。
如果您指的是域外部的URL,那么您可能会对本文感兴趣:
https://blog.cloudflare.com/fast-google-fonts-with-cloudflare-workers/

10-07 19:02
查看更多