最近在個(gè)人網(wǎng)站butterpig中實(shí)現(xiàn)了個(gè)性印章的在線設(shè)計(jì)功能洁段，里面目前一共實(shí)現(xiàn)了有八九種個(gè)性印章的樣式共郭，并且還有六七種網(wǎng)絡(luò)開源商用的字體類型。具體效果可以訪問(wèn)：個(gè)性印章在線設(shè)計(jì)查看写半。
印章的設(shè)計(jì)尉咕，其實(shí)原理非常簡(jiǎn)單，主要就是通過(guò)canvas畫圖技術(shù)年缎。而且畫的內(nèi)容也非常簡(jiǎn)單基礎(chǔ)铃慷，因此不在這里具體說(shuō)明炎功。
該功能的難點(diǎn)在于如何在前端加載第三方字體文件。眾所周知蛇损，字體文件的格式一般有.ttf和.woff等，由于中文和英文的差異性股囊，導(dǎo)致中文字體包的大小一般都比較大更啄，一般都有好幾M，更有幾十M幾百M(fèi)的字體包文件祭务。
所以如果把這些字體文件放在自己的云服務(wù)器中，用戶訪問(wèn)的時(shí)候加載到用戶的瀏覽器柳沙，那對(duì)于一些帶寬很小的云服務(wù)器簡(jiǎn)直不可想象拌倍。因此最終想到通過(guò)cdn加速來(lái)加載字體。最終證明該方法效果很好数初，同時(shí)也不占用任何服務(wù)端資源梗顺。
具體的思路，就是講字體文件都放到github中自己建的一個(gè)倉(cāng)庫(kù)中寺谤，然后通過(guò)jsdelivr來(lái)加速這個(gè)github倉(cāng)庫(kù)。因?yàn)閖sdelivr本就是一個(gè)專門加速github中開源庫(kù)的cdn，凡是我們放到github中并且公開的內(nèi)容薄料，都可以通過(guò)jsdelivr來(lái)作為cdn加速摄职，非常的穩(wěn)定和方便获列。具體的使用方法大家可以去jsdelivr的官網(wǎng)去看蛔垢，非常簡(jiǎn)單，就是把url鏈接中的幾個(gè)路徑改成自己的倉(cāng)庫(kù)名稱和文件名稱就行了鹏漆。
該功能還有個(gè)問(wèn)題，就是如何得知字體文件是否加載完成括蝠，是否加載成功或者失敗饭聚。必須在加載成功后，馬上回調(diào)來(lái)渲染canvas才行秒梳。然后html5中的@font-face是在真正用到該字體的是否，才自動(dòng)去后臺(tái)加載的朋譬，并且也不知道是否加載完成婆跑，導(dǎo)致前臺(tái)的顯示混亂。因此這里使用一個(gè)叫做fontfaceobserver的開源庫(kù)犀忱，這個(gè)庫(kù)的作用就是專門監(jiān)聽前端是否加載完成了某個(gè)字體扶关，通過(guò)它的監(jiān)聽，我們就知道用戶選擇的某種字體是否通過(guò)cdn加載完成节槐，并在加載完成后調(diào)用渲染铜异。
new FontFaceObserver("font family").load(null, 15 * 1000).then(() => {
? ? ? ? ? //console.log('Font is available');
? ? ? ? ? this.drawPreview()
? ? ? ? }, () => {
? ? ? ? ? console.log('Font is not available');
? ? ? ? });
其中FontFaceObserver默認(rèn)的字體加載超時(shí)時(shí)間是3秒，比較短揍庄，所以我們改成15秒以防萬(wàn)一，不過(guò)一般情況下沃测，只要網(wǎng)速好，加載個(gè)幾M的字體文件也就是瞬間而已蒂破。這樣一來(lái)附迷，個(gè)性印章工具的使用體驗(yàn)算是比較合理。
我的博客中也有很多技術(shù)分享文章挟秤，大家可以關(guān)注，個(gè)人技術(shù)資源分享
