加载fontawesome的后备计划 [英] Fallback plan for loading fontawesome

问题描述

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

UPDATE: to make my question clearer, I referred the following code snippet and implemented something similar-

<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 中的回退 -

I'm loading font-awesome.css and the fallback in my JSP this way-

<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加载从bootstrap cdn'）; 发生。但它没有。
代码 if（typeof bootstrapcdn ==undefined）和 if（typeof cloudflare ==undefined）检查css是否已从相应的URL加载或不？
我在某处出错了？

As per this code snippet, I expected for the execution of alert('loading from bootstrap cdn'); to happen. But it didn't. Does the code if (typeof bootstrapcdn == "undefined") and if (typeof cloudflare == "undefined") check if the css has been loaded from respective URLs or not? Am I going wrong somewhere?

推荐答案

您可以通过创建一个span来测试FontAwesome是否已加载， fa'类，然后测试它的字体。

You can test if FontAwesome has loaded by creating a span which uses FontAwesome's 'fa' class and then testing its font. You then remove the span and return the result.

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

这个函数会给你一个真或假的结果，所以你可以使用如果为false，则加载本地回退（document.write等）。

This function will give you a true or false result, so you can use to load a local fallback (document.write etc.) if false.

这篇关于加载fontawesome的后备计划的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！