H5在線編輯接口

一、介紹


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

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


二、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即時當前需要用到的文字內(nèi)容
  • Tag: '.test1'   　　　　　　　　　　　　　　　　　//可不填的參數(shù)
  • };
  • $youzikuClient.getFontFace(entity, function (result) {
  • console.log(result.FontFamily);　　　　　　　　//如果沒有填寫Tag參數(shù)，則需要通過FontFamily將字體效果應(yīng)用于文字上
  • console.log(result.AccessKey);
  • console.log(result.Tag);
  • console.log(result.ErrorMessage);　　　　　　　//如果代碼設(shè)置有問題，將返回錯誤信息。
  • 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è)置有問題，將返回錯誤信息。
  • console.log(result.FontfaceList[i].Code);　　　　　　　        //如果返回結(jié)果正常Code為200。
  • }

  • });


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


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

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


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