js加载第三方字体,检测加载完成事件

最近在做一个项目涉及到加载第三方字体的问题,首批需要支持一百多种字体,然后首先想到的就是@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()也无法缓存,目前还未解决此问题.

转载于：https://www.cnblogs.com/bjf784022747/articles/10337004.html

js加载第三方字体,检测加载完成事件相关推荐

微信小程序加载第三方字体
1.加载本地字体做小程序项目时,有时为了提升页面展示效果,会引入一些第三方字体,引入方式如下代码片段 /*每个页面公共css */ @font-face {font-family: "al ...
TP3.2如何加载第三方类库？加载腾讯短信sdk 报错。
TP3.2如何加载第三方类库?加载腾讯短信sdk 报错主要在于引入 Vendor('qcloudsms.index'); index.php后还需要use引入命名空间,不然就会报类未定义的错误. & ...
iOS 加载第三方字体
项目中有时有特殊需求,需要使用特定的字体样式,这时就需要我们加载外部字体库. 步骤: 1.下载所需要的ttf文件 2.将.ttf文件导入工程中,在Info.plist中添加一项:Fonts provi ...
maven 加入第三方库_maven加载第三方jar不能加载
这个问题处于项目组,总算是解决了.下面是一些自己的做法. 1.说明介绍公司现在用的是spring+maven,使用的公共maven库没有问题,但是想要把一些老的项目改造这种框架会出现一些问题. 因为 ...
maven加载第三方jar不能加载
这个问题处于项目组,总算是解决了.下面是一些自己的做法. 1.说明介绍公司现在用的是spring+maven,使用的公共maven库没有问题,但是想要把一些老的项目改造这种框架会出现一些问题. 因为 ...
html 字体样式加粗,css字体怎么加粗？
css可以使用font-weight属性设置文本加粗.该属性用于设置显示元素的文本中所用的字体加粗.所有主流浏览器都支持font-weight属性. font-weight 属性设置文本的粗细. 属性 ...
使用cdn来加速字体文件在前端的加载速度，并监听字体是否加载完成
最近在个人网站butterpig中实现了个性印章的在线设计功能,里面目前一共实现了有八九种个性印章的样式,并且还有六七种网络开源商用的字体类型.具体效果可以访问:个性印章在线设计查看. 印章的设计,其 ...
网页引用第三方字体总结
文章目录字体类型及引用压缩字体库文件其他前言:绝大多数情况下网页制作为了美观,会额外引用第三方字体.很久以前会把特殊字体切成图片,但后期维护成本太大了,小小改动都需要设计师进行修改,人工成本实 ...
Qt 添加第三方字体库
Qt字体库默认主持操作系统所有的字体库,但是设计师一般喜欢比如思源字体,但是咱们的操作系统没有安装,在其他没有安装第三方字体库的电脑上运行,就达不到设计师最初设计的观感.这篇博客介绍Qt如何第三方字体 ...

js加载第三方字体,检测加载完成事件

js加载第三方字体,检测加载完成事件相关推荐

最新文章

热门文章