JS模式
一、介绍
JS插件是针对普通内容展示性网站设计的，适合企业网站、新闻网站等。
该插件应用简单：只需要把有字库的JS库引用至页面，然后设置一下选择器和字体，即可使页面指字文字显示出指定字体效果。So easy!!!
噢，对了，别忘了在有字库后台把您的域名添加到白名单里。
通过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");
- //第一个参数"seletor1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。
- //第二个参数"xxx"请您设置要使用的字体的Accesskey。
-
//第三个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。
-
//第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
-
$webfont.draw();
-
</script>
三、操作演示
-
-
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.在异步方法的最后一行（在加载内容的执行语句的下一行）添加如下语句：
-
1)常规调用
$webfont.submit(partName);
-
2)异步分页场景调用
-
$webfont.submit(partName,PageIndex);
- <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");
- //第一个参数"selector1"请设置选择器代码（如:#id1、.class1、h1等），多个选择器，请用英文逗号隔开（如:#id1,.class1,h1）。
- //第二个参数"xxx"请您设置PC端要使用的字体的Accesskey。
-
//第三个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。
-
//第三个参数可支持英文内容使用不同的英文字体（其实是字体优先级）；如：$webfont.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");
-
//调用mobile()函数即手机端应用不同的字体，第一个参数"xxx"请您设置手机端要使用的字体的Accesskey，第二个参数"fontfamily"请设置字体的英文名，该参数主要是为了标记当前所用字体，方便检查、核对。手机端也支持英文内容使用不同的英文字体。
- $webfont.draw();
- </script>
- <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?"></script>
- <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?param=page|proid"></script>
- <script type="text/javascript" src="http://cdn.repository.webfont.com/wwwroot/js/wf/youziku.api.min.js?noparam=page|proid"></script>
四、异步内容
JS插件是在页面的onload事件中根据选择器所指定的标签去获取内容的，如果某块内容，是异步加载的（在onload事件之后加载），JS将无法有效获取到该部分内容，为此，JS插件再次开挂，支持异步文字：
参数partName是指当前异步内容块的名字（整个页面唯一即可，因为一个页面下可能会调用多个），由用户自定义(不能有中文字符)，用于标记当前异步内容块。如果一张页面中，有多个异步内容块，则需要您添加多个$webfont.submit()，且同一页面上不能有相同partName参数。
参数PageIndex是可选参数，是指当前异步内容的分页页码。如果当前异步内容块是有分页的，则需要在调用$webfont.submit()语句的时候传进来当前页码。
注意：原代码中的$webfont.load()语句也需要做相应调整：如果$webfont.load()中的选择器(第一个参数)包含了异步标签（显示异步内容的标签），则需要将这个异步标签剔出来（将这个选择器改成能将这个异步标签排除在外的选择器写法），然后将这个异步标签单独写成一行$webfont.load()语句。
如：原$webfont.load()语句中的选择器是body，那么现在就需要将这个$webfont.load()语句拆分成两行，一行是不包含异步标签的其他所有标签，一行就只是那个异步标签。
五、PC端和手机端使用不同字体效果（同一个页面下）
伪代码：
六、带参数的URL
JS插件是通过当前页面的URL为key来存放页面相应的字体的，所以新的页面（新的URL）首次打开时，会有闪烁的现象，那是服务器在生成字体并将字体注册在当前新的URL(新的key)下；
如果URL带有参数，且参数每次打开或刷新都会变动，那么页面就会一直存在闪烁的现象，因为每次打开JS插件都认为是新页面；
如果参数的变动对于应用了在线字体的那部分内容没有影响（如微信分享时自动加的后缀），那么可以通知JS插件，让JS插件不去理会这些参数(也就是说，这些参数无论怎样变动，都不会被JS插件识别为新的URL)，具体操作方法如下：
1,在JS地址后面添加一个英文问号(?)即可让JS插件不去理会当前URL所有的参数，也就是说，无论参数怎样变动，页面都不会再闪烁了。
2,在JS地址后面通过param参数来指示哪些参数需要保留，多个参数用“|”隔开（这些参数变动，会影响应用了在线字体的那部分内容），其他的参数忽略。
3,在JS地址后面通过noparam参数来指示哪些参数需要忽略，多个参数用“|”隔开（这些参数变动，不会影响应用了在线字体的那部分内容），其他的参数保留。
