H5在线编辑接口
一、介绍
对于H5在线编辑工具，要调用一套特殊字体，往往需要把整套字体事先加载到客户端。不仅影响用户体验，同时也带来巨大的流量成本。
有字库针对在线文字编辑场景，提供专门的插件。应用此插件调用中文字体，初始化时，无需加载任何字体数据，使页面得以极速展开。根据用户输入的内容快速获取需要的字型。即时响应，轻盈灵巧。
二、JS库
引用JS库。
将下面JS库引用到页面的<head>标签里。
- <script type="text/javascript" src="http://cdn.repository.webfont.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({ AccessKey: "xxxxxxxxxx", Tag: "you tag" }).then(result=> {
console.log(result);
}).catch(ex=> {
console.error(ex);
});
本接口自动生成@font-face语句，并自动插入页面的head标签中，@font-face语句不通过返回值返回。引用字体时，可以使用字体的FontFamily来引用字体(FontFamily是字体的英文名，可以事先从字体详情页获取；另外，回调函数的json格式的返回值中也有FontFamily信息)，或者传参时，把选择器通过Tag参数提交上去，js就会自动把字体效果应用到选择器指定的标签上。
