0

是否可以在 PHP 中运行 Cufon 文本替换脚本（或在发送到浏览器之前）？我问的原因是，在 Cufon 能够在其上施展魔法之前，显示的 HTML 是其正常的浏览器渲染文本存在一些问题。用户会看到一闪而过的未渲染文本 (FOUT)，然后它就会被 Cufon 的精彩所取代。我注意到渲染的 HTML 生成了一些标签来代替 HTML（canvas 和 Cufon 标签）文本，我想，如果这可以在 PHP 中完成然后发送到浏览器以便浏览器实际接收绘制从一开始的文字？这是否意味着将绘制文本的代码移植到 PHP 中？这是昨晚的天才或更可能是愚蠢的举动，想知道是否有人对此事有一些想法。谢谢阅读。

 Cufon.replace('div#nav-menu a h5',{
            fontFamily:'United Stencil',
            hover: true,
            hoverables : {h5 : true}
            });         
        Cufon.replace('.stencil',{fontFamily:'United Stencil'})
        Cufon.replace('.heavy',{
            fontFamily : 'United Heavy',
            hover : true,
            hoverables : {
                                h1:true,
                                h2:true,
                                h3:true
                                }
        });

这是 Cufoned HTML：

<a class=" heavy" href="/mp_svn/node/5">
<cufon class="cufon cufon-canvas" alt="Products" style="width: 65px; height: 16px;">
    <canvas width="77" height="17" style="width: 77px; height: 17px; top: -2px; left: -2px;"></canvas>
    <cufontext>Products</cufontext>
</cufon>

我想从一开始就将上面的 HTML 发送到浏览器，在 Cufon 之前它是这样的：

<a href="/mp_svn/node/5">Products</a>
4

4 回答 4

1

Cufon 有一个回调函数，在所有文本被替换后运行：http ://groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

你也可以

  1. 最初用 CSS 隐藏内容，然后在回调中用 javascript 显示它，并且绝对确保您不会有 FOUT——但是您的页面对于没有 JS 的用户将完全无法访问

  2. 或者，在 DOM 准备好时用 JS 隐藏内容，然后在文本替换发生后再次显示。使用 jQuery，

    $(document).ready(function(){
    $('#content').css('visibility', 'hidden');

    Cufon.CSS.ready(function() {
        $('#content').css('visibility, 'visible');
    });
});

这对于 Firefox/webkit 应该可以正常工作，但是在 JS 生效之前，IE 中仍然会有一个 FOUC。$('#content').fadeTo(0, 0);如果您希望在内容被 Cufon 替换后能够淡入淡出，您也可以使用它。

编辑
我想出了一个更好的方法。您使用#1 方法，使用 CSS 隐藏内容，但随后您会在一个<noscript>区域中使用重置的样式声明visibility:visible

这样就绝对没有FOUC，如果启用JS，他们也不会有问题。

于 2011-03-01T02:06:21.710 回答
0

我在 css 中将可见性设置为 false，在 Cufon 上调用替换函数并使用 onAfterReplace 回调将元素设置为可见。

$(document).ready(function(){    
    Cufon.replace('h1', { fontFamily: 'alwyn-thin',      
    onAfterReplace:function(el,options){    
         $(el).css('visibility', 'visible');
}});
于 2012-02-29T13:43:54.087 回答
0

您可以使用 Cufon 的内置功能

Cufon.now();

所以替换文本时没有闪烁。

于 2010-11-19T16:12:56.497 回答
0

好主意，这是人们长期以来一直在做的事情。这是 2004 年的早期版本：http ://www.alistapart.com/articles/dynatext/

还有一些较新的

于 2010-11-19T16:14:46.920 回答