php - PHPでCufonを実行する

Question

PHPで（またはブラウザに送信される前に）Cufonテキスト置換スクリプトを実行することは可能ですか？私が尋ねる理由は、Cufonがその魔法を描くことができる前に、表示されたHTMLが通常のブラウザでレンダリングされたテキストであることに少し問題があるからです。ユーザーには、Cufonの素晴らしさに置き換えられる前に、レンダリングされていないテキスト（FOUT）のフラッシュが表示されます。レンダリングされた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
                                }
        });

CufonedHTMLは次のとおりです。

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

score 1 · Accepted Answer

Cufonには、すべてのテキストが置き換えられた後に実行されるコールバック関数があります：http: //groups.google.com/group/cufon/browse_thread/thread/20a8d2edd45f1aa5/1a498d21856405cd

あなたはどちらか

最初にCSSでコンテンツを非表示にしてから、コールバックでjavascriptを使用して表示し、FOUTがないことを絶対に確認します。ただし、JSがないユーザーはページに完全にアクセスできなくなります。

または、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に置き換えられた後、コンテンツをフェードインできるようにする場合にも使用できます。

編集
私は優れた方法を考え出しました。CSSでコンテンツを非表示にする、＃1のアプローチを採用しますが、その後、<noscript>リセットされるスタイル宣言のある領域をスローします。visibility:visible

そうすれば、FOUCはまったく発生せず、JSが有効になっている場合は、問題も発生しません。

score 0 · Accepted Answer

Cufonの組み込み関数を使用できます

Cufon.now();

そのため、テキストを置き換えるときにフラッシュはありません。

score 0 · Accepted Answer

素晴らしいアイデアであり、これは人々がしばらくの間行ってきたことです。これは 2004 年の初期のものです: http://www.alistapart.com/articles/dynatext/

そして、いくつかの新しいもの

score 0 · Accepted Answer

css で可視性を false に設定し、Cufon で replace 関数を呼び出し、onAfterReplace コールバックを使用して要素を可視に設定します。

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

php - PHPでCufonを実行する

4 に答える 4

Related

Reference