H5在線編輯接口

一、介紹


對(duì)于H5在線編輯工具，要調(diào)用一套特殊字體，往往需要把整套字體事先加載到客戶(hù)端。不僅影響用戶(hù)體驗(yàn)，同時(shí)也帶來(lái)巨大的流量成本。

有字庫(kù)針對(duì)在線文字編輯場(chǎng)景，提供專(zhuān)門(mén)的插件。應(yīng)用此插件調(diào)用中文字體，初始化時(shí)，無(wú)需加載任何字體數(shù)據(jù)，使頁(yè)面得以極速展開(kāi)。根據(jù)用戶(hù)輸入的內(nèi)容快速獲取需要的字型。即時(shí)響應(yīng)，輕盈靈巧。


二、JS庫(kù)


引用JS庫(kù)。

將下面JS庫(kù)引用到頁(yè)面的<head>標(biāo)簽里。

  • <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即是字體的代碼，需要登錄有字庫(kù)后，在目標(biāo)字體的使用頁(yè)面中獲取。
  • Content:'xxxxx', 　　　　　　// Content即時(shí)當(dāng)前需要用到的文字內(nèi)容
  • Tag: '.test1'   　　　　　　　　　　　　　　　　　//可不填的參數(shù)
  • };
  • $youzikuClient.getFontFace(entity, function (result) {
  • console.log(result.FontFamily);　　　　　　　　//如果沒(méi)有填寫(xiě)Tag參數(shù)，則需要通過(guò)FontFamily將字體效果應(yīng)用于文字上
  • console.log(result.AccessKey);
  • console.log(result.Tag);
  • console.log(result.ErrorMessage);　　　　　　　//如果代碼設(shè)置有問(wèn)題，將返回錯(cuò)誤信息。
  • console.log(result.Code);　　　　　　　        //如果返回結(jié)果正常Code為200。
  • });

2、getBatchFontFace ()

  • var data = {
  • Tags: []
  • };
  • data.Tags.push({ AccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', Content: 'xxx', Tag: '.test1' });//Tag參數(shù)可不填
  • data.Tags.push({ AccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', Content: 'xxx', Tag: '#id2' });     //Tag參數(shù)可不填
  • $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);　　　　　　　//如果代碼設(shè)置有問(wèn)題，將返回錯(cuò)誤信息。
  • console.log(result.FontfaceList[i].Code);　　　　　　　        //如果返回結(jié)果正常Code為200。
  • }

  • });


四、預(yù)先加載常用字


預(yù)先加載常用漢字3000個(gè)，CDN急速加載一秒完成，頁(yè)面馬上有效果。使用該方法時(shí)，請(qǐng)先聯(lián)系管理員，確保該字體已經(jīng)生成常用字體包。

  •      $youzikuPromiseClient.fullLoadFont({ AccessKey: "xxxxxxxxxx", Tag: "you tag" }).then(result=> {
                 console.log(result);
             }).catch(ex=> {
                 console.error(ex);
             });


本接口自動(dòng)生成@font-face語(yǔ)句，并自動(dòng)插入頁(yè)面的head標(biāo)簽中，@font-face語(yǔ)句不通過(guò)返回值返回。引用字體時(shí)，可以使用字體的FontFamily來(lái)引用字體(FontFamily是字體的英文名，可以事先從字體詳情頁(yè)獲?。涣硗?，回調(diào)函數(shù)的json格式的返回值中也有FontFamily信息)，或者傳參時(shí)，把選擇器通過(guò)Tag參數(shù)提交上去，js就會(huì)自動(dòng)把字體效果應(yīng)用到選擇器指定的標(biāo)簽上。
請(qǐng)先同意托管協(xié)議