H5在线编辑接口

一、介绍


对于H5在线编辑工具,要调用一套特殊字体,往往需要把整套字体事先加载到客户端。不仅影响用户体验,同时也带来巨大的流量成本。

有字库针对在线文字编辑场景,提供专门的插件。应用此插件调用中文字体,初始化时,无需加载任何字体数据,使页面得以极速展开。根据用户输入的内容快速获取需要的字型。即时响应,轻盈灵巧。


二、JS库


引用JS库。

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

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


三、方法


1、getFontFace()

  • var entity={
  • AccessKey:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',  //AccessKey即是字体的代码,需要登录有字库后,在目标字体的使用页面中获取。
  • Content:'xxxxx',       // Content即时当前需要用到的文字内容
  • Tag: '.test1'                    //可不填的参数
  • };
  • $youzikuClient.getFontFace(entity, function (result) {
  • console.log(result.FontFamily);        //如果没有填写Tag参数,则需要通过FontFamily将字体效果应用于文字上
  • console.log(result.AccessKey);
  • console.log(result.Tag);
  • console.log(result.ErrorMessage);       //如果代码设置有问题,将返回错误信息。
  • console.log(result.Code);               //如果返回结果正常Code为200。
  • });

2、getBatchFontFace ()

  • var data = {
  • Tags: []
  • };
  • data.Tags.push({ AccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', Content: 'xxx', Tag: '.test1' });//Tag参数可不填
  • data.Tags.push({ AccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', Content: 'xxx', Tag: '#id2' });     //Tag参数可不填
  • $youzikuClient.getBatchFontFace(data, function (result) {
  • var length = result.FontfaceList.length;
  • for (var i = 0; i< length; i++) {
  • console.log(result.FontfaceList[i].Tag);
  • console.log(result.FontfaceList[i].AccessKey);
  • console.log(result.FontfaceList[i].FontFamily);
  • console.log(result.FontfaceList[i].ErrorMessage);       //如果代码设置有问题,将返回错误信息。
  • console.log(result.FontfaceList[i].Code);               //如果返回结果正常Code为200。
  • }
  • });


四、预先加载常用字


预先加载常用汉字3000个,CDN急速加载一秒完成,页面马上有效果。使用该方法时,请先联系管理员,确保该字体已经生成常用字体包。

  •      $youzikuPromiseClient.fullLoadFont("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx").then(result=> {
                 console.log(result);
             }).catch(ex=> {
                 console.error(ex);
             });


本接口自动生成@font-face语句,并自动插入页面的head标签中,@font-face语句不通过返回值返回。引用字体时,可以使用字体的FontFamily来引用字体(FontFamily是字体的英文名,可以事先从字体详情页获取;另外,回调函数的json格式的返回值中也有FontFamily信息),或者传参时,把选择器通过Tag参数提交上去,js就会自动把字体效果应用到选择器指定的标签上。
请先同意托管协议