JS模式

一、介紹


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

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

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

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


二、JS庫


將下面JS引用到頁面的<head>標(biāo)簽里。

偽代碼：

  • <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");
  • //第一個(gè)參數(shù)"seletor1"請?jiān)O(shè)置選擇器代碼（如:#id1、.class1、h1等），多個(gè)選擇器，請用英文逗號隔開（如:#id1,.class1,h1）。
  • //第二個(gè)參數(shù)"xxx"請您設(shè)置要使用的字體的Accesskey。

  • //第三個(gè)參數(shù)"fontfamily"請?jiān)O(shè)置字體的英文名，該參數(shù)主要是為了標(biāo)記當(dāng)前所用字體，方便檢查、核對。

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

  • $webfont.draw();

  • </script>


三、操作演示


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


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


    • 1.更新原script標(biāo)簽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是指當(dāng)前異步內(nèi)容塊的名字（整個(gè)頁面唯一即可，因?yàn)橐粋€(gè)頁面下可能會調(diào)用多個(gè)），由用戶自定義(不能有中文字符)，用于標(biāo)記當(dāng)前異步內(nèi)容塊。如果一張頁面中，有多個(gè)異步內(nèi)容塊，則需要您添加多個(gè)$webfont.submit()，且同一頁面上不能有相同partName參數(shù)。

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

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

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


    五、PC端和手機(jī)端使用不同字體效果（同一個(gè)頁面下）


     偽代碼：

    • <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");
    • //第一個(gè)參數(shù)"selector1"請?jiān)O(shè)置選擇器代碼（如:#id1、.class1、h1等），多個(gè)選擇器，請用英文逗號隔開（如:#id1,.class1,h1）。
    • //第二個(gè)參數(shù)"xxx"請您設(shè)置PC端要使用的字體的Accesskey。

    • //第三個(gè)參數(shù)"fontfamily"請?jiān)O(shè)置字體的英文名，該參數(shù)主要是為了標(biāo)記當(dāng)前所用字體，方便檢查、核對。

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

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

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


    六、帶參數(shù)的URL


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

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

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

    1,在JS地址后面添加一個(gè)英文問號(?)即可讓JS插件不去理會當(dāng)前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ù)需要保留，多個(gè)參數(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ù)需要忽略，多個(gè)參數(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é)議