在 PHP 中运行 Cufon

发布于 2024-10-03 17:58:19 字数 1360 浏览 0 评论 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>

原文

Is it possible to run the Cufon text replacement script in PHP (or before its sent to the browser)? The reason I ask is that there is a bit of an issue with the displayed HTML being its normal browser rendered text before Cufon is able to draw its magic over it. The user sees a flash of unrendered text (FOUT) before it is replaced with Cufon's awesomeness. I've noticed that the rendered HTML has some tags generated in place of the HTML (canvas and Cufon tags) text and I thought, what if this could be done in PHP and then sent to the browser so that the browser actually receives the drawn text from the start?. Would this mean porting over the code that draws the text to PHP? This came as a stroke of genius or more likely stupidity last night and was wondering if anyone had some thoughts on the matter. Thanks for reading.

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

Here is the 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>

I would like to send the above HTML to the browser from the beginning, pre-Cufon it is something like:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很糊涂小朋友 2024-10-10 17:58:19

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

您可以

首先使用 CSS 隐藏内容，然后在回调中使用 javascript 显示它，并绝对确定您不会有 FOUT --但是没有JS的用户将完全无法访问你的页面

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

$(文档).ready(function(){
    $('#content').css('可见性', '隐藏');

    Cufon.CSS.ready(function() {
        $('#content').css('可见性, '可见');
    });
});

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

编辑
我想到了一个更高级的办法。您采用第 1 种方法，使用 CSS 隐藏内容，但随后放入一个区域，其中包含重置 visibility:visible 的样式声明，

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

Cufon has a callback function that runs after all text has been replaced: http://groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

You could either

Initially hide the content with CSS, then show it with javascript in the callback, and be absolutely sure you will have no FOUT--but your page will be totally inaccessible for users without JS

Or, hide the content with JS when the DOM is ready, and then show it again after the text replacement has occurred. Using jQuery,

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

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

This should work fine for Firefox/webkit, but there will still be a FOUC in IE before the JS takes effect. You could also use $('#content').fadeTo(0, 0); if you want to be able to fade in the content once it's been replaced by Cufon.

EDIT
I have figured out a superior way. You go with the #1 approach, hiding content with CSS, but then you throw in a <noscript> area with a style declaration that resets visibility:visible

That way there will be absolutely no FOUC, and if JS is enabled, they won't have a problem either.

回复收藏 0 原文

哀由 2024-10-10 17:58:19

您可以使用Cufon的内置功能

Cufon.now();

，这样替换文本时就不会出现闪烁。

You could use Cufon's built in function

Cufon.now();

So there's no flash when replacing the text.

回复收藏 0 原文

在巴黎塔顶看东京樱花 2024-10-10 17:58:19

好主意，人们已经这样做了一段时间了。这是 2004 年的早期文章：http://www.alistapart.com/articles/dynatext/

还有一些较新的

回复收藏 0 原文

哭泣的笑容 2024-10-10 17:58:19

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

$(document).ready(function(){    
    Cufon.replace('h1', { fontFamily: 'alwyn-thin',      
    onAfterReplace:function(el,options){    
         $(el).css('visibility', 'visible');
}});

I set my visibility to false in css, call the replace function on Cufon and use the onAfterReplace callback to set the element to visible.

$(document).ready(function(){    
    Cufon.replace('h1', { fontFamily: 'alwyn-thin',      
    onAfterReplace:function(el,options){    
         $(el).css('visibility', 'visible');
}});

回复收藏 0 原文

~没有更多了~