最近在項目中需要對特殊字體進行繪制與導(dǎo)出，如下：
簡單解釋一下：所謂繪制，就是視覺上可以看到就行（預(yù)覽狀態(tài)），導(dǎo)出呢，就是將看到的轉(zhuǎn)換成圖片（或者Canvas），以便于后續(xù)處理。
這里總結(jié)了 3 種方式，分別是 CSS 、 SVG、Canvas，來看看各自有什么差異和優(yōu)缺點吧
一、CSS 的繪制與導(dǎo)出
首先來看 CSS ，這是最簡單的繪制方式了。
假設(shè) HTML是這樣的。
<div class="text">前端偵探</div>
加點樣式。
.text{
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: rebeccapurple;
color: #fff;
font-size: 36px;
font-family: MFMengYuan-Regular;
}這里給了一個特殊的字體MFMengYuan-Regular（造字工坊夢緣體），當(dāng)然現(xiàn)在肯定是沒有效果，因為系統(tǒng)并沒有這樣的字體。
為了使這個特殊字體生效，需要手動通過@font-face去定義。
@font-face {
font-family: "MFMengYuan-Regular";
src: url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2"); /* IE9 */
src: local('?'),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff2?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff2"),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff"),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.ttf?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");
}這里引用的是一個在線生成的字體，對于 CSS 來說也是小菜一碟，效果如下：
是不是非常輕松？
CSS 繪制非常容易，但現(xiàn)在僅僅是視覺上的，那如何將這個樣式轉(zhuǎn)換成圖片導(dǎo)出呢？
在這里，需要借助 SVG? 中的foreignObject[1]元素，通過這個元素，可以將 HTML?嵌入到SVG中，例如：
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="200" height="200">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>前端偵探</div>
</body>
</foreignObject>
</svg>
一些截圖工具庫，比如 html2canvas都依賴 foreignObject 這個特性。
而SVG本質(zhì)上就是圖片，然后就可以將這個圖片繪制到 Canvas 上，進一步進行圖片合成和處理了，整體思路如下：
不過需要注意的是，SVG?是一個獨立的圖片，必須包含繪制內(nèi)容的全部信息，比如這里需要手動將style?樣式內(nèi)嵌到div中，就像這樣（代碼結(jié)構(gòu)可能不是很好看）。
<div class="text">
<style>
@font-face {
font-family: "MFMengYuan-Regular";
src: url("https://webfontsource.yuewen.com/api/v1/yfont/font.eot?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2"); /* IE9 */
src: local('?'),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff2?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff2"),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.woff?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2") format("woff"),
url("https://webfontsource.yuewen.com/api/v1/yfont/font.ttf?base64=0&fnotallow=MFMengYuan-Regular&text=%E5%89%8D%E7%AB%AF%E4%BE%A6%E6%8E%A2");
}
.text{
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: rebeccapurple;
color: #fff;
font-size: 36px;
font-family: MFMengYuan-Regular;
}
</style>
前端偵探
</div>
接下來通過JS將其包裹上foreignObject元素，注意一下特殊字符的轉(zhuǎn)義。
const htmlSvg = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${width/pixelRatio}" height="${height/pixelRatio}">
<foreignObject x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml" style="height:100%;margin:0">
${dom.outerHTML}
</body>
</foreignObject></svg>`.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
img.src = htmlSvg這樣得到的一個??SVG??字符串就是一個完整的圖片了。
等等...圖片是出來了，不過字體好像丟失了？
為什么會這樣呢？原因在于，上面字體使用的是在線字體，在線字體在轉(zhuǎn)成字符后就是普通的字符了，不會發(fā)出請求，自然也不會包含字體的真實信息了，所以要解決這個問題就必須提前將字體轉(zhuǎn)成本地??base64??格式，如下
<div class="text">
<style>
@font-face {
font-family: "MFMengYuan-Regular";
src: local('?'),
url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAAAAAAAAA...==) format('woff');
}
.text{
display: flex;
width: 200px;
height: 200px;
justify-content: center;
align-items: center;
background-color: rebeccapurple;
color: #fff;
font-size: 36px;
font-family: MFMengYuan-Regular;
}
</style>
前端偵探
</div>
這樣就正常了（SVG字符可能會比較長）。
同樣也能將這個圖片繪制到Canvas上。
const context = canvas.getContext('2d');
context.drawImage(htmlSvg, 0, 0, width, height);效果如下：
除此之外，通過Canvas還能將圖片轉(zhuǎn)成blob地址，相比完整 SVG地址而言，地址更加簡潔，有時候圖片過大，在賦值給圖片src會造成瀏覽器卡頓，盡量用blob方式。
canvas.toBlob(function(blob){
img.src = URL.createObjectURL(blob)
})效果如下：
完整轉(zhuǎn)換過程可以查看以下鏈接：
- CSS font - 碼上掘金 (juejin.cn)[2]
- CSS font (codepen.io)[3]
- CSS font (runjs.work)[4]
二、SVG 的繪制與導(dǎo)出
下面來看SVG方式，相比CSS而言，可能稍微麻煩一點，主要是文本排版方面，同樣需要注意字體base64處理。
<svg id="svg" class="text" xmlns='http://www.w3.org/2000/svg' viewBox="0 0 200 200" width="200" height="200">
<style>
@font-face {
font-family: "MFMengYuan-Regular";
src: local('?'),
url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAAAAAAAAAAAAAAAAAAA...==) format('woff');
}
.text{
background-color: rebeccapurple;
}
</style>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="36" font-family="MFMengYuan-Regular">前端偵探</text>
</svg>
這里需要注意一下 SVG 中的文本居中方式，用到了dominant-baseline（基線對齊）和text-anchor（錨點對齊），如下：
兩者結(jié)合，再配合x=50%和y=50%就實現(xiàn)了水平垂直居中效果了，如下：
由于已經(jīng)是SVG了，所以導(dǎo)出圖片或者繪制到Canvas畫布上就更方便，只需要將整個 dom 結(jié)構(gòu)轉(zhuǎn)義一下就可以了，無需額外包裹。
const htmlSvg = `data:image/svg+xml,${dom.outerHTML}`.replace(/"/g,"'").replace(/%/g,"%25").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E");
img.src = htmlSvg效果如下：
繪制到Canvas上也是同樣的方式。
const context = canvas.getContext('2d');
context.drawImage(htmlSvg, 0, 0, width, height);效果如下：
完整轉(zhuǎn)換過程可以查看以下鏈接：
- SVG font - 碼上掘金 (juejin.cn)[5]
- SVG font (codepen.io)[6]
- SVG font (runjs.work)[7]
三、Canvas 的繪制與導(dǎo)出
最后是 Canvas方式。
這里要繪制的很簡單，就是一個矩形和一行文字，主要步驟如下：
const context = canvas.getContext('2d');
context.fillStyle = 'rebeccapurple'// 填充顏色
context.fillRect(0,0,width,height) // 繪制矩形
context.fillStyle = '#fff' // 填充顏色
context.font = `36px MFMengYuan-Regular`; // 設(shè)置字體屬性
context.textAlign = 'center'; // 設(shè)置文本對齊
context.textBaseline = 'middle' // 設(shè)置基線對齊
context.fillText('前端偵探', width/2, height/2); // 繪制文本效果如下：
?
?
不出意料，字體果然沒有繪制，因為系統(tǒng)并沒有這種字體，那如何主動添加字體呢？
這里有一個策略，Canvas讀取的是頁面上已經(jīng)渲染過的字體，也就是說頁面上如果提前渲染過該字體，那么在繪制的時候就可以直接繪制出來，如果字體是動態(tài)的，可以通過動態(tài)創(chuàng)建。
const fontStyle = `
@font-face {
font-family: "MFMengYuan-Regular";
src: local('?'),
url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAwcAA0AAAAAEPgAAAAAAAAAAA...==) format('woff');
}
`
const style = document.createElement('style')
style.textContent = fontStyle
document.head.appendChild(style)
現(xiàn)在重新繪制，如下：
可以看到，起初是沒有字體的，刷新后才繪制新的字體。
原因是，前面這段代碼僅僅是表示頁面有這個字體，但是并沒有渲染過，通過Canvas繪制后，這個字體才真正被渲染，所以到了第二次字體才生效。
知道原因后，解決就很簡單了。如果不是實時繪制，比如說預(yù)覽狀態(tài)通過 CSS 繪制，那么等到 Canvas 繪制的時候（比如通過按鈕點擊生成預(yù)覽圖），字體當(dāng)然已經(jīng)渲染過，自然也不會有這個問題。如果一定要實時繪制，可以采用逐幀比對的方式，一旦圖像發(fā)生變化，就表示字體渲染成功，實現(xiàn)如下
該方法參考自張鑫旭老師這篇文檔：canvas API中文網(wǎng) - 中文文檔 - CanvasRenderingContext2D.font[8]。
// 先隨便繪制一個字體
context.font = `36px UNKNOW`;
context.fillText('前端偵探', width/2, height/2);
const dataDefault = context.getImageData(0, 0, width/4, height/2).data;
const detect = function () {
// 然后繪制實際字體
context.font = `36px MFMengYuan-Regular`;
context.fillText('前端偵探', width/2, height/2);
// 如果前后數(shù)據(jù)一致，說明字體還沒加載成功，繼續(xù)檢測
var dataNow = context.getImageData(0, 0, width/4, height/2).data;
if ([].slice.call(dataNow).join('') == [].slice.call(dataDefault).join('')) {
console.log('沒有變化，重新渲染')
requestAnimationFrame(detect);
}
};
這樣就可以實時繪制特殊字體了。
Canvas本身就是圖片了，直接可以轉(zhuǎn)換成圖片或者導(dǎo)出，這里就不多介紹了。
完整實現(xiàn)過程可以查看以下鏈接：
- Canvas font - 碼上掘金 (juejin.cn)[9]
- Canvas font (codepen.io)[10]
- Canvas font (runjs.work)[11]
四、總結(jié)一下各自優(yōu)缺點
下面簡單整理了一下各自實現(xiàn)的難易程度。
CSS繪制最簡單，尤其是在文本排版方面，要遠遠領(lǐng)先其他兩種方式。
SVG繪制相對比較簡單，在矢量圖形處理，比如描邊特效要比 CSS 更有優(yōu)勢，這兩種方式導(dǎo)出的難點在于一些外鏈資源的額外處理。
而Canvas繪制稍微復(fù)雜一些，在特殊字體需要逐幀去檢測是否渲染，優(yōu)點是繪制出來就是圖片，無需額外導(dǎo)出。
| 繪制 | 導(dǎo)出 |
CSS | ??????（簡單） | ????（一般） |
SVG | ????（一般） | ????（一般） |
Canvas | ??（復(fù)雜） | ????????（超級簡單） |
關(guān)于 CSS 和 SVG 的選擇可以看實際文本排版需求，比如文本需要換行，字號大小也不一致，像這種情況 CSS 就比較有優(yōu)勢了，無需去精確計算文本坐標。
另外，在實際工作中，根據(jù)需求可能需要多種方式結(jié)合使用，也就是預(yù)覽狀態(tài)和導(dǎo)出狀態(tài)分別用不同的方式實現(xiàn)，比如圖片混合，在預(yù)覽狀態(tài)完全可以通過 CSS 實現(xiàn)，在導(dǎo)出時才通過 Canvas 去繪制合成。
參考資料
[1]foreignObject: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?。
[2]CSS font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170205919391776801?。
[3]CSS font (codepen.io): https://codepen.io/xboxyan/pen/oNydKrv?。
[4]CSS font (runjs.work): https://runjs.work/projects/62abc5942d9042b5?。
[5]SVG font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170214063337635853?。
[6]SVG font (codepen.io): https://codepen.io/xboxyan/pen/zYaaOvb?。
[7]SVG font (runjs.work): https://runjs.work/projects/e2ff8774f0d0463b?。
[8]canvas API中文網(wǎng) - 中文文檔 - CanvasRenderingContext2D.font: https://www.canvasapi.cn/CanvasRenderingContext2D/font#&others?。
[9]Canvas font - 碼上掘金 (juejin.cn): https://code.juejin.cn/pen/7170227469218218014?。
[10]Canvas font (codepen.io): https://codepen.io/xboxyan/pen/ExRRYMV?。
[11]Canvas font (runjs.work): https://runjs.work/projects/fc8d17a0c2494531?。
