加载font真棒的后备计划

Fallback plan for loading fontawesome

本文关键字：计划 font 加载      更新时间：2023-09-26

更新：为了让我的问题更清楚，我引用了以下代码片段并实现了类似的东西-

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

我正在以这种方式加载font-awesome.css和JSP中的回退-

<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" />
<script>
    function fallbackForFontAwesome() {
        if (typeof bootstrapcdn == "undefined") {
            document.write(unescape('%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(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));
            } else {
                alert('loading from cloudfare');
            }
        } else {
            alert('loading from bootstrap cdn');
        }
    }
    fallbackForFontAwesome();
</script>

根据这个代码片段，我预计alert('loading from bootstrap cdn');的执行会发生。但事实并非如此。代码if (typeof bootstrapcdn == "undefined")和if (typeof cloudflare == "undefined")是否检查css是否已从相应的URL加载？我是不是哪里出错了？

您可以通过创建一个使用FontAwesome的"fa"类的span，然后测试其字体来测试FontAwesome是否已加载。然后删除跨度并返回结果。

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

此函数将为您提供一个true或false的结果，因此如果为false，您可以使用加载本地回退（document.write等）。

您的javascript变量未定义

您的代码有些错误（在两个语句的末尾使用）

document.write(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));

现在，如果它进入第一个if语句，它也应该工作，u必须这样写代码，否则它将不会进入其他

function fallbackForFontAwesome() {
    if (typeof bootstrapcdn == "undefined") {
        document.write(unescape('%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(unescape('%3Clink type="text/css" rel="stylesheet" href="/common/fontawesome/css/font-awesome.min.css" /%3E'));
        }
        else {
            alert('loading from cloudflare cdn');
        }
    } else {
        alert('loading from bootstrap cdn');
    }
}
fallbackForFontAwesome();

创建一个函数，将<span>添加到正文中，以检查FontAwesome字体类型是否已加载（通过CDN）。

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="path/to/local/fallback.css">';
    document.head.innerHTML = headHTML;
  }
  document.body.removeChild(span);
};
相关文章：