加載第三方字體,檢測加載完成事件

最近在做一個項目涉及到加載第三方字體的問題,首批需要支持一百多種字體,然后首先想到的就是@fant-face,但是在實際應用中發現無法滿足當前需求. 目前的項目是用canvas的一個開源庫fabric.js實現圖片和文字的拖動,放大,縮小,旋轉等操作,需要對文字設置不同字體的功能,首先就用的@fant-face,因為之前沒用過,本來以為是只要用@fant-face定義的字體文件會在頁面加載就去加載字體文件,實踐發現並非這樣,本來還想着在選擇字體的時候再去動態添加對應文字的@fant-face,后來發現只有在頁面中有用到這個字體時才回去加載,那就不用那么麻煩了,直接全部寫入css中. 但是又遇到了一個問題,就是在fabric.js創建的canvas畫布中,只有在第一次設置字體的時候如果字體已經加載完成才能渲染成功,否則就渲染不成功,那只能想其他辦法了. 然后就去搜了一大堆監控字體加載完成相關的,最后發現了一個神器document.fonts,接下來就介紹一下怎么使用.

//加載字體文件
   obj格式,cssValue為自定義字體的名字,url為自定義字體的文件路徑
    loadFont(obj){
        if(document.fonts&&!this.checkFont(obj.cssValue)) { let that=this; let fontFamily=obj.cssValue; console.log(obj); let fontFace = new FontFace(obj.cssValue, `local('${obj.cssValue}'),url('${obj.url}') format('ttf'),url('${obj.url}')`); fontFace.load().then(function(loadedFontFace) { document.fonts.add(loadedFontFace); that.canvasDemo.updateTextFontFamily(fontFamily); }); } }, //檢測字體文件是否已加載 checkFont(name){ let values=document.fonts.values(); let isHave=false; let item=values.next(); while(!item.done&&!isHave) { let fontFace=item.value; if(fontFace.family==name) { isHave=true; } item=values.next(); } return isHave; } 復制代碼

這樣就可以監控到字體加載完成的事件,然后在完成事件中去更新canvas的文字內容了.目前發現document.fonts不支持ie,在ff中會自動緩存字體文件,但是在chrome中無法緩存,刷新頁面之后在使用的話document.fonts中就找不到相關的字體了,加了local()也無法緩存,目前還未解決此問題.