最近在个人网站butterpig中实现了个性印章的在线设计功能，里面目前一共实现了有八九种个性印章的样式，并且还有六七种网络开源商用的字体类型。具体效果可以访问：个性印章在线设计查看。
印章的设计，其实原理非常简单，主要就是通过canvas画图技术。而且画的内容也非常简单基础，因此不在这里具体说明。
该功能的难点在于如何在前端加载第三方字体文件。众所周知，字体文件的格式一般有.ttf和.woff等，由于中文和英文的差异性，导致中文字体包的大小一般都比较大，一般都有好几M，更有几十M几百M的字体包文件。
所以如果把这些字体文件放在自己的云服务器中，用户访问的时候加载到用户的浏览器，那对于一些带宽很小的云服务器简直不可想象。因此最终想到通过cdn加速来加载字体。最终证明该方法效果很好，同时也不占用任何服务端资源。
具体的思路，就是讲字体文件都放到github中自己建的一个仓库中，然后通过jsdelivr来加速这个github仓库。因为jsdelivr本就是一个专门加速github中开源库的cdn，凡是我们放到github中并且公开的内容，都可以通过jsdelivr来作为CDN加速，非常的稳定和方便。具体的使用方法大家可以去jsdelivr的官网去看，非常简单，就是把url链接中的几个路径改成自己的仓库名称和文件名称就行了。
该功能还有个问题，就是如何得知字体文件是否加载完成，是否加载成功或者失败。必须在加载成功后，马上回调来渲染canvas才行。然后html5中的@font-face是在真正用到该字体的是否，才自动去后台加载的，并且也不知道是否加载完成，导致前台的显示混乱。因此这里使用一个叫做fontfaceobserver的开源库，这个库的作用就是专门监听前端是否加载完成了某个字体，通过它的监听，我们就知道用户选择的某种字体是否通过cdn加载完成，并在加载完成后调用渲染。
new FontFaceObserver("font family").load(null, 15 * 1000).then(() => { //console.log('Font is available'); this.drawPreview() }, () => { console.log('Font is not available'); });其中FontFaceObserver默认的字体加载超时时间是3秒，比较短，所以我们改成15秒以防万一，不过一般情况下，只要网速好，加载个几M的字体文件也就是瞬间而已。这样一来，个性印章工具的使用体验算是比较合理。
我的博客中也有很多技术分享文章，大家可以关注，个人技术资源分享
原文链接：https://blog.csdn.net/wh8383672/article/details/114454228?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934458816782184630950%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934458816782184630950&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-27-114454228-null-null.nonecase&utm_term=%E8%87%AA%E5%BB%BAcdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/8235
