7

我正在创建一个使用 Cufon 的网站，并且由于大量的 Javascript 而在页面重量方面特别重。因此，我尝试使用 head.js （http://headjs.com/）异步加载脚本，如下所示：

head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() {
 head.js("/js/libs/cufon-yui.js", function() {
    head.js("/js/shared/Stag_Bold_700.font.js" , function() {
            Cufon.replace('h1', { fontFamily: 'Stag Bold' });
    });
 });
});

所以先下载jquery，依次下载后续的cufon lib文件和cufon字体，最后调用cufon替换H1。显然，这是一个精简的示例，更换次数较少，但仅在尝试更换 H1 时仍然不起作用。

问题是只有在 Internet Explorer (6/7/8) 中，文本没有被替换，但我可以看到 Cufon 肯定被调用了。我可以确定这一点，因为标签中添加了“cufon-active cufon-ready”类。当我使用 IE Developer 工具栏检查标记时，cufon/cufoncanvas 标签位于所选元素内，但由于缺少更好的词，它们是不可见的。

在 IE9 中，该脚本的行为与 Chrome 和 Firefox 类似。我已经尝试调整 Cufon 绘图引擎，并已更新到最新的 1.09i 版本以取得良好的效果。如果我将 Cufon 调用语句移动到文档就绪事件而不是异步加载，它可以工作，但我正在尝试优化页面加载，并且我的站点将使用许多 Cufon 字体以及许多其他 JS 插件。我也尝试过同时使用 labs.js 和 head.js 来异步加载适当的文件。

4

5 回答 5

2

试着打电话

 <script type="text/javascript"> Cufon.now(); </script>

就在</body>标签关闭之前。

于 2011-02-08T09:20:31.150 回答
2

我有同样的问题 - 我通过使用 head.js 的浏览器检测来解决这个问题：

if (head.browser.mozilla || head.browser.webkit || head.browser.opera ||
        (head.browser.ie && (head.browser.version == '9.0'))) {
        head.js('script/jquery.min.js',
                'script/cufon.js', function () {
                    head.js('script/bebas_neue_400.font.js', function () {
                        Cufon.replace('h1', {
                            textShadow: '1px 1px rgba(0, 0, 0, 0.2)'
                        }).now();
                        // or a head.js('scripts/file.with.cufon.replacement.js');
                    });
                });
            } else {
        // here we load scripts depending on GZIP support for this browser
        document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>');            
    }

您还可以使用条件注释（我没有这样做，因为我也在 JavaScript 中进行 GZIP 支持检测，并且需要调整动态加载的脚本。）

这是一个 hack，但在库本身解决之前应该足够有用。

（我还在这里发布了 GIST 以及更完整的示例）

于 2011-04-13T01:43:45.177 回答
1

尝试Cufon.now()在Cufon.replace通话后添加，如下所示：

Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();
于 2011-04-29T07:11:18.047 回答
0

我以类似于 CameraSchoolDropout 方法的方式解决了这个问题，除了Document.write使用 IE 条件标签和YepNope.js而不是使用。

github 上的这个问题说他们document.createElement('script')使用 .

您可以看到我在http://epraxadev.com/yepnope/创建的示例页面

<head>

<style type="text/css">
#txt    { visibility:hidden; }
</style>

<!--[if lte IE 8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/adventor.cufon.js"></script>
<![endif]-->

<script src="js/modernizr.custom.js"></script>
<script>
yepnope([{
    test: window.jQuery,
    nope: {
        'yJ': '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
        'yCufon': 'js/cufon-yui.js',
        'yFont': 'js/museo.font.js'
    },
    callback: {
        'yJ': function(){
            console.log("YepNope loaded jQuery! This isn't IE!");
        }
    },
    complete: function() {
        console.log('All browsers, including IE, will show this');

        Cufon.replace('h1');

        $(document).ready(function(){
            $('#txt').css('visibility', 'visible');
        });
    }
}]);
</script>

<noscript>
    <style type="text/css">
    #txt { visibility:visible; }
    </style>
</noscript>

</head>
于 2011-05-11T00:54:08.003 回答
0

现在只需使用常规<script>标签加载 jQuery 和 Cufón 并使用脚本加载器加载后续文件。

使用document.write是一种不好的方法，因为它仅在脚本在 DOMReady 之前加载/执行时才有效，并且使用浏览器嗅探来执行它也不是一个好方法，因为它可能会给出错误的结果。

条件注释也不是一个好的解决方案，因为您将来可能需要更新脚本，并且您必须记住在 2 个不同的地方更新它，这不利于可维护性。

在 GitHub 上关注此问题以了解何时修复该错误。

于 2011-05-20T17:03:43.837 回答