最近在打包H5小游戏的时候遇到一个问题,不知道有米有大佬或者朋友遇到过
关于web字体加载的
想问一下,将资源全部转换成base64,打包到一个Html后,如何加载ttf字体资源?
目前调试的时候发现,creator引擎自带的加载方法,是使用document.fons.load
来进行加载(具体代码见:creator引擎目录\resources\engine\cocos2d\core\load-pipeline\font-loader.js)
但是,这种方法,打包出来的H5在本机上打开能看到效果,可是给我同事以后,打开会报错.
报错信息显示,该ttf字体的路径未找到,于是自动用系统字体替换.
我目前把这段加载的方法,换了一下,使用如下方法加载:
首先,把base64的数据转换成一个ArrayBuffer
function fontSources (url){ let res = window.resMap[url]; let binary_string = window.atob(res); let len = binary_string.length; let bytes = new Uint8Array(len); for(let i = 0; i < len; i++){ bytes[i] = binary_string.charCodeAt(i); } res = bytes.buffer; sources = res; }
sources获得的就是转换好的buffer
然后,把用buffer来创建fontFace,在fontFace加载完成后,用document.fonts.add来将它加入
到fontFaceSet中.
let fontFace = new FontFace('40px ' + font, sources);
fontFace.load().then(function(loadedFontFace){
document.fonts.add(fontFace);
resolve();
}, function(err){
console.log(`load ttf err ${err}`);
reject();
});
调试中,发现字体最后获取的也是正确的,但是测试发现,只要将加载好的字体,add到fontFaceSet中
就一样会报错,错误信息也是路径找不到.但是,如果不add进去,字体无法使用.
以上测试时,已创建好了包含@font-face的style以及相关属性也已配置.
希望大佬能帮忙看一下,或者给出一个可以用的解决方案,小弟这两天实在是没法了,对web方面不怎么熟悉,希望懂的大佬提点一下,感激不尽!