当CDN加载失败时，为字体添加一个本地CSS回退

Appending a local CSS fallback for font-awesome when the CDN fails to load

本文关键字：一个 回退 CSS 添加 失败 加载 CDN 字体      更新时间：2023-09-26

我正试图为字体真棒创建一个本地回退，当CDN加载失败时，我在向<head>元素添加<link>标签时遇到了一些问题。

预期行为

如果对CDN的GET请求在页面加载时产生200以外的状态，则应在<head>元素中添加到字体真棒的本地版本的链接。

实际行为

向CDN发出的GET请求失败后，不会向<head>元素添加指向本地版本的字体真棒的链接。

该问题似乎发生在以xmlHttp.onreadystatechange = function() {开头的代码块中。

当我将parentElement.insertBefore(createFallback, referenceElement);移动到xmlHttp.onreadystatechange = function() {块之外时，到本地回退的链接被添加到<head>元素中，这很好。但我不明白为什么它不能在代码块中工作。

我希望能够检测CDN是否关闭，如果是，请将链接应用到字体真棒的本地版本。在查看页面时，我没有在控制台中收到任何错误消息，

我的代码如下：

<!doctype html>
<html class="no-js" lang="">
    <head>
        <link id="fontAwesomeFallback" rel="stylesheet" href="#">
        <script>
        // Define Variables
        var createFallback = document.createElement("link");
            createFallback.type = "text/css";
            createFallback.rel = "stylesheet";
            createFallback.href = "/css/font-awesome.css";
        var referenceElement = document.getElementById("fontAwesomeFallback");
        var parentElement = referenceElement.parentNode;
        // Open Http Request
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css", true);
        xmlHttp.onreadystatechange = function() {
           if (xmlHttp.readyState == 4 && xmlHttp.status !== 200) {
             parentElement.insertBefore(createFallback, referenceElement);
             console.log("Local fallback appended to head element");
           }
        }
        </script>
    </head>
    <body>
    </body>
</html>

我真的很感激你们能提供的任何帮助！

谢谢！

答案在https://stackoverflow.com/a/27404688/294577。

但是，如果您使用jQuery库，我建议使用以下代码来最大限度地减少布局回流。

<div id="FontAwesome_fallback" style="display:none"></div>    
<script async>(function($) {
    var $span = $('<span class="fa" style="display:none"></span>');
    $('#FontAwesome_fallback').append($span)
    var f = $span.css('fontFamily');
    if (f !== 'FontAwesome') {
      $('head').append('<link href="/css/font-awesome.css" rel="stylesheet">');
    }
    })(jQuery);
</script>

不必担心createDocumentFragment，因为它在http://quirksmode.org/dom/core/#miscellaneous

您也可以通过以下方式瞄准文档主体，只需使用JavaScript即可完成这一切：

<script async>(function($){
    var $span = $('<span class="fa" style="display:none">`</span>').appendTo('body');
    if ($span.css('fontFamily') !== 'FontAwesome' ) {
    $('head').append('<link href="~/assets/shared/css/vendor/font-awesome-4.7.0.min.css" rel="stylesheet">');
    }
    $span.remove();
    })(window.jQuery);
</script>
相关文章：