JS模式

一、介紹


JS插件是針對普通內(nèi)容展示性網(wǎng)站設(shè)計的，適合企業(yè)網(wǎng)站、新聞網(wǎng)站等。

該插件應(yīng)用簡單：只需要把有字庫的JS庫引用至頁面，然后設(shè)置一下選擇器和字體，即可使頁面指字文字顯示出指定字體效果。So easy!!!

噢，對了，別忘了在有字庫后臺把您的域名添加到白名單里。

應(yīng)用了JS插件的頁面，JS插件會自動根據(jù)當前頁面的內(nèi)容，從字體原文件上裁切出一個小字庫（只包含當前頁面內(nèi)容涉及到的字型，沒用到的字型統(tǒng)統(tǒng)刪除），然后自動將字體通過@font-face語句引用到當前頁面，保證在瀏覽者打開這張頁面時，頁面上的字體顯示出開發(fā)人員預(yù)期的效果。
通過JS插件的“按需裁切”，大大降低了字體原文件的大小，使中文字體也像英文字體一樣輕盈靈巧，易于加載。


二、JS庫


將下面JS引用到頁面的<head>標簽里。

偽代碼：

  • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
  • <script type="text/javascript">
  • $webfont.load("seletor1", "xxx", "fontfamily");
  • //第一個參數(shù)"seletor1"請設(shè)置選擇器代碼（如:#id1、.class1、h1等），多個選擇器，請用英文逗號隔開（如:#id1,.class1,h1）。
  • //第二個參數(shù)"xxx"請您設(shè)置要使用的字體的Accesskey。

  • //第三個參數(shù)"fontfamily"請設(shè)置字體的英文名，該參數(shù)主要是為了標記當前所用字體，方便檢查、核對。

  • //第三個參數(shù)可支持英文內(nèi)容使用不同的英文字體（其實是字體優(yōu)先級）；如：$webfont.load("seletor1", "xxx", "你自定義的英文字體fontfamily,有字庫fontfamily");

  • $webfont.draw();

  • </script>


三、操作演示


    • 四、異步內(nèi)容


    JS插件是在頁面的onload事件中根據(jù)選擇器所指定的標簽去獲取內(nèi)容的，如果某塊內(nèi)容，是異步加載的（在onload事件之后加載），JS將無法有效獲取到該部分內(nèi)容，為此，JS插件再次開掛，支持異步文字：


    • 1.更新原script標簽src為：

    • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js#async"></script>

    • 2.將原代碼中的 $webfont.draw(); 改為 $webfont.draw(0);

    • 3.在異步方法的最后一行（在加載內(nèi)容的執(zhí)行語句的下一行）添加如下語句：

    •     1)常規(guī)調(diào)用

            $webfont.submit(partName);

    •     2)異步分頁場景調(diào)用

    •       $webfont.submit(partName,PageIndex);

    參數(shù)partName是指當前異步內(nèi)容塊的名字（整個頁面唯一即可，因為一個頁面下可能會調(diào)用多個），由用戶自定義(不能有中文字符)，用于標記當前異步內(nèi)容塊。如果一張頁面中，有多個異步內(nèi)容塊，則需要您添加多個$webfont.submit()，且同一頁面上不能有相同partName參數(shù)。

    參數(shù)PageIndex是可選參數(shù)，是指當前異步內(nèi)容的分頁頁碼。如果當前異步內(nèi)容塊是有分頁的，則需要在調(diào)用$webfont.submit()語句的時候傳進來當前頁碼。

    注意：原代碼中的$webfont.load()語句也需要做相應(yīng)調(diào)整：如果$webfont.load()中的選擇器(第一個參數(shù))包含了異步標簽（顯示異步內(nèi)容的標簽），則需要將這個異步標簽剔出來（將這個選擇器改成能將這個異步標簽排除在外的選擇器寫法），然后將這個異步標簽單獨寫成一行$webfont.load()語句。

    如：原$webfont.load()語句中的選擇器是body，那么現(xiàn)在就需要將這個$webfont.load()語句拆分成兩行，一行是不包含異步標簽的其他所有標簽，一行就只是那個異步標簽。


    五、PC端和手機端使用不同字體效果（同一個頁面下）


     偽代碼：

    • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js"></script>
    • <script type="text/javascript">
    • $webfont.load("selector1", "xxx", "fontfamily").mobile("xxx","fontfamily");
    • //第一個參數(shù)"selector1"請設(shè)置選擇器代碼（如:#id1、.class1、h1等），多個選擇器，請用英文逗號隔開（如:#id1,.class1,h1）。
    • //第二個參數(shù)"xxx"請您設(shè)置PC端要使用的字體的Accesskey。

    • //第三個參數(shù)"fontfamily"請設(shè)置字體的英文名，該參數(shù)主要是為了標記當前所用字體，方便檢查、核對。

    • //第三個參數(shù)可支持英文內(nèi)容使用不同的英文字體（其實是字體優(yōu)先級）；如：$webfont.load("seletor1", "xxx", "你自定義的英文字體fontfamily,有字庫fontfamily");

    • //調(diào)用mobile()函數(shù)即手機端應(yīng)用不同的字體，第一個參數(shù)"xxx"請您設(shè)置手機端要使用的字體的Accesskey，第二個參數(shù)"fontfamily"請設(shè)置字體的英文名，該參數(shù)主要是為了標記當前所用字體，方便檢查、核對。手機端也支持英文內(nèi)容使用不同的英文字體。

    • $webfont.draw();
    • </script>


    六、帶參數(shù)的URL


    JS插件是通過當前頁面的URL為key來存放頁面相應(yīng)的字體的，所以新的頁面（新的URL）首次打開時，會有閃爍的現(xiàn)象，那是服務(wù)器在生成字體并將字體注冊在當前新的URL(新的key)下；

    如果URL帶有參數(shù)，且參數(shù)每次打開或刷新都會變動，那么頁面就會一直存在閃爍的現(xiàn)象，因為每次打開JS插件都認為是新頁面；

    如果參數(shù)的變動對于應(yīng)用了在線字體的那部分內(nèi)容沒有影響（如微信分享時自動加的后綴），那么可以通知JS插件，讓JS插件不去理會這些參數(shù)(也就是說，這些參數(shù)無論怎樣變動，都不會被JS插件識別為新的URL)，具體操作方法如下：

    1,在JS地址后面添加一個英文問號(?)即可讓JS插件不去理會當前URL所有的參數(shù)，也就是說，無論參數(shù)怎樣變動，頁面都不會再閃爍了。

    • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?"></script>

    2,在JS地址后面通過param參數(shù)來指示哪些參數(shù)需要保留，多個參數(shù)用“|”隔開（這些參數(shù)變動，會影響應(yīng)用了在線字體的那部分內(nèi)容），其他的參數(shù)忽略。

    • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?param=page|proid"></script>

    3,在JS地址后面通過noparam參數(shù)來指示哪些參數(shù)需要忽略，多個參數(shù)用“|”隔開（這些參數(shù)變動，不會影響應(yīng)用了在線字體的那部分內(nèi)容），其他的參數(shù)保留。

    • <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?noparam=page|proid"></script>
請先同意托管協(xié)議