JS模式

一、介绍


JS插件是针对普通内容展示性网站设计的,适合企业网站、新闻网站等。

该插件应用简单:只需要把有字库的JS库引用至页面,然后设置一下选择器和字体,即可使页面指字文字显示出指定字体效果。So easy!!!

噢,对了,别忘了在有字库后台把您的域名添加到白名单里。

应用了JS插件的页面,JS插件会自动根据当前页面的内容,从字体原文件上裁切出一个小字库(只包含当前页面内容涉及到的字型,没用到的字型统统删除),然后自动将字体通过@font-face语句引用到当前页面,保证在浏览者打开这张页面时,页面上的字体显示出开发人员预期的效果。
通过JS插件的“按需裁切”,大大降低了字体原文件的大小,使中文字体也像英文字体一样轻盈灵巧,易于加载。


二、JS库


将下面JS引用到页面的<head>标签里。

伪代码:

  • <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
  • <script type="text/javascript">
  • $youziku.load("seletor1", "xxx", "fontfamily");
  • //第一个参数"seletor1"请设置选择器代码(如:#id1、.class1、h1等),多个选择器,请用英文逗号隔开(如:#id1,.class1,h1)。
  • //第二个参数"xxx"请您设置要使用的字体的Accesskey。
  • //第三个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。

  • //第三个参数可支持英文内容使用不同的英文字体(其实是字体优先级);如:$youziku.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");

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


三、操作演示


  • 四、异步内容


    JS插件是在页面的onload事件中根据选择器所指定的标签去获取内容的,如果某块内容,是异步加载的(在onload事件之后加载),JS将无法有效获取到该部分内容,为此,JS插件再次开挂,支持异步文字:


    • 1.更新原script标签src为:

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

    • 2.将原代码中的 $youziku.draw(); 改为 $youziku.draw(0);

    • 3.在异步方法的最后一行(在加载内容的执行语句的下一行)添加如下语句:

    •     1)常规调用

            $youziku.submit(partName);
    •     2)异步分页场景调用

    •       $youziku.submit(partName,PageIndex);

    参数partName是指当前异步内容块的名字(整个页面唯一即可,因为一个页面下可能会调用多个),由用户自定义(不能有中文字符),用于标记当前异步内容块。如果一张页面中,有多个异步内容块,则需要您添加多个$youziku.submit(),且同一页面上不能有相同partName参数。

    参数PageIndex是可选参数,是指当前异步内容的分页页码。如果当前异步内容块是有分页的,则需要在调用$youziku.submit()语句的时候传进来当前页码。

    注意:原代码中的$youziku.load()语句也需要做相应调整:如果$youziku.load()中的选择器(第一个参数)包含了异步标签(显示异步内容的标签),则需要将这个异步标签剔出来(将这个选择器改成能将这个异步标签排除在外的选择器写法),然后将这个异步标签单独写成一行$youziku.load()语句。

    如:原$youziku.load()语句中的选择器是body,那么现在就需要将这个$youziku.load()语句拆分成两行,一行是不包含异步标签的其他所有标签,一行就只是那个异步标签。


    五、PC端和手机端使用不同字体效果(同一个页面下)


     伪代码:

    • <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>
    • <script type="text/javascript">
    • $youziku.load("selector1", "xxx", "fontfamily").mobile("xxx","fontfamily");
    • //第一个参数"selector1"请设置选择器代码(如:#id1、.class1、h1等),多个选择器,请用英文逗号隔开(如:#id1,.class1,h1)。
    • //第二个参数"xxx"请您设置PC端要使用的字体的Accesskey。
    • //第三个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。

    • //第三个参数可支持英文内容使用不同的英文字体(其实是字体优先级);如:$youziku.load("seletor1", "xxx", "你自定义的英文字体fontfamily,有字库fontfamily");

    • //调用mobile()函数即手机端应用不同的字体,第一个参数"xxx"请您设置手机端要使用的字体的Accesskey,第二个参数"fontfamily"请设置字体的英文名,该参数主要是为了标记当前所用字体,方便检查、核对。手机端也支持英文内容使用不同的英文字体。

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


    六、带参数的URL


    JS插件是通过当前页面的URL为key来存放页面相应的字体的,所以新的页面(新的URL)首次打开时,会有闪烁的现象,那是服务器在生成字体并将字体注册在当前新的URL(新的key)下;

    如果URL带有参数,且参数每次打开或刷新都会变动,那么页面就会一直存在闪烁的现象,因为每次打开JS插件都认为是新页面;

    如果参数的变动对于应用了在线字体的那部分内容没有影响(如微信分享时自动加的后缀),那么可以通知JS插件,让JS插件不去理会这些参数(也就是说,这些参数无论怎样变动,都不会被JS插件识别为新的URL),具体操作方法如下:

    1,在JS地址后面添加一个英文问号(?)即可让JS插件不去理会当前URL所有的参数,也就是说,无论参数怎样变动,页面都不会再闪烁了。

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

    2,在JS地址后面通过param参数来指示哪些参数需要保留,多个参数用“|”隔开(这些参数变动,会影响应用了在线字体的那部分内容),其他的参数忽略。

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

    3,在JS地址后面通过noparam参数来指示哪些参数需要忽略,多个参数用“|”隔开(这些参数变动,不会影响应用了在线字体的那部分内容),其他的参数保留。

    • <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js?noparam=page|proid"></script>
请先同意托管协议