在PHP中運行Cufon

是否可以在PHP中運行Cufon文本替換腳本（或在將其發送到瀏覽器之前）？我要問的原因是，在Cufon能夠吸引它的魔力之前，顯示的HTML是它的普通瀏覽器呈現的文本存在一些問題。在用Cufon的精彩內容替換之前，用戶會看到未呈現的文本（FOUT）。我注意到，呈現的HTML有一些代碼生成的代替HTML（canvas和Cufon標籤）文本，我想，如果這可以在PHP中完成然後發送到瀏覽器，以便瀏覽器實際接收繪製文字從一開始？這是否意味着將代碼繪製到PHP中？這是昨天晚上天才或更可能是愚蠢的衝動，並想知道是否有人對此事有一些想法。謝謝閱讀。在PHP中運行Cufon

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從一開始就發送到瀏覽器，前置的Cufón是這樣的：

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

來源

2010-11-19 Collin White

您可以使用Cufon的內置功能

Cufon.now();

因此，在更換文字時沒有閃光燈。

來源

2010-11-19 16:12:56 Flipke

我試着添加Cufon.now（）到上面的JS結尾，並且仍然有FOUT效應發生。有沒有更好的地方叫它？ – 2010-11-19 17:45:28

根據API，（https://github.com/sorccu/cufon/wiki/API）它應該放在頁面的最後，但是首先放在script標籤中，你可以試試嗎？ – Flipke 2010-11-22 08:50:52

試過了，仍然得到FOUT。感謝您的建議，但從文檔看來，它應該已經成功了。 – 2010-11-22 15:49:59

好主意，這是人們一直在做的事。下面是從2004年年初一個：http://www.alistapart.com/articles/dynatext/

而一些較新的

來源

2010-11-19 16:14:46

謝謝約翰，但我認爲這些與我所尋找的解決方案有點不同。我不想使用圖像替換等來獲取文本，因爲我試圖儘可能使所有內容都符合要求。 – 2010-11-19 17:44:57

的Cufón具有所有文本已經被替換後運行一個回調函數：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的，但仍然會有在IE FOUC的JS生效之前。如果您希望能夠在Cufon取代內容後淡入內容，則還可以使用$('#content').fadeTo(0, 0);。

編輯
我已經想出了一個更好的方法。你用＃1的方法，用CSS隱藏內容，但然後你扔在一個<noscript>區域與風格聲明重置visibility:visible

這樣，將絕對沒有FOUC，如果JS啓用，他們贏得'也沒有問題。

來源

2011-03-01 02:06:21

我會給你的解決方案一個旋轉。非常感謝！ – 2011-03-01 18:54:42

我在css中將我的可見性設置爲false，在Cufon上調用替換函數並使用onAfterReplace回調將元素設置爲可見。

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

來源

2012-02-29 13:43:54 dops

在PHP中運行Cufon

回答

相關問題