JS模式

一、介紹


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

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

噢，對(duì)了，別忘了在有字庫(kù)后臺(tái)把您的域名添加到白名單里。

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


二、JS庫(kù)


將下面JS引用到頁(yè)面的<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"請(qǐng)?jiān)O(shè)置選擇器代碼（如:#id1、.class1、h1等），多個(gè)選擇器，請(qǐng)用英文逗號(hào)隔開(kāi)（如:#id1,.class1,h1）。
  • //第二個(gè)參數(shù)"xxx"請(qǐng)您設(shè)置要使用的字體的Accesskey。

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

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

  • $webfont.draw();

  • </script>


三、操作演示


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


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


    • 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í)行語(yǔ)句的下一行）添加如下語(yǔ)句：

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

            $webfont.submit(partName);

    •     2)異步分頁(yè)場(chǎng)景調(diào)用

    •       $webfont.submit(partName,PageIndex);

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

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

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

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


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


     偽代碼：

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

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

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

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

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


    六、帶參數(shù)的URL


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

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

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

    1,在JS地址后面添加一個(gè)英文問(wèn)號(hào)(?)即可讓JS插件不去理會(huì)當(dāng)前URL所有的參數(shù)，也就是說(shuō)，無(wú)論參數(shù)怎樣變動(dòng)，頁(yè)面都不會(huì)再閃爍了。

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

    2,在JS地址后面通過(guò)param參數(shù)來(lái)指示哪些參數(shù)需要保留，多個(gè)參數(shù)用“|”隔開(kāi)（這些參數(shù)變動(dòng)，會(huì)影響應(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地址后面通過(guò)noparam參數(shù)來(lái)指示哪些參數(shù)需要忽略，多個(gè)參數(shù)用“|”隔開(kāi)（這些參數(shù)變動(dòng)，不會(huì)影響應(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>
請(qǐng)先同意托管協(xié)議