前端工程師的菜姍姍來遲的中文Webfont

5/5前端工程師的菜！姍姍來遲的中文Webfont三年前，有一個(gè)設(shè)計(jì)師面試一位Web前端工程師，其中有一段這樣的對話：“如果設(shè)計(jì)師盼望用圖片實(shí)現(xiàn)某個(gè)字體樣式，而從技術(shù)的角度來說這樣不合理，但設(shè)計(jì)師特別堅(jiān)持，這時(shí)候你怎么辦？”“我會給設(shè)計(jì)師講解工程上面臨的問題，爭取他理解。例如：如果文本使用圖片，以騰訊站點(diǎn)的訪問量來說，這里會需要消耗大量的服務(wù)器資源，至少需要增加XXX臺服務(wù)器，帶寬流量消耗XXX萬”。這是一段真實(shí)的面試場景，而我就是那位被面試者。這些年Web前端技術(shù)在迅猛的進(jìn)展，這樣的問題已經(jīng)有了解決方案——WebFont，如果再回到當(dāng)年面試的場景，我會給出更好的答案。WebFont技術(shù)可以讓網(wǎng)頁使用在線字體，而無需使用圖片，從而有機(jī)會解決開頭設(shè)計(jì)師提到的問題。它通過CSS的@font-face語句引入在線字體，使用CSS選擇器指定運(yùn)用字體的文本，與此同時(shí)專用于Web展現(xiàn)的woff格式字體也得到各大掃瞄器廠商支持，進(jìn)一步削減了字體的體積。在國外，WebFont已經(jīng)特別流行了，大量的網(wǎng)站使用了WebFont技術(shù)，而業(yè)界大佬Google也順勢推出的免費(fèi)WebFont云托管服務(wù)，這一切均帶動(dòng)了國外字體制作行業(yè)的高速進(jìn)展。一、WebFont的優(yōu)勢相對圖片，WebFont有如下優(yōu)勢：支持選中、復(fù)制支持Ctrl+F查找對搜尋引擎友好支持工具翻譯支持無障礙訪問，支持朗讀字體是矢量圖形，支持矢量縮放，自動(dòng)適配高清屏文本修改便利字形可以重復(fù)利用，節(jié)省網(wǎng)絡(luò)資源二、中文WebFont的逆境既然WebFont有如此多優(yōu)勢，為何中文站點(diǎn)依然很少接受？這里主要是三個(gè)“中國特色”造成的：1、中文字體體積英文只有26個(gè)字母，一套字體不過幾十KB；而漢字卻有數(shù)萬個(gè)，導(dǎo)致字體文件通常有好幾MB大小，文件體積比英文字體大數(shù)百倍，依據(jù)中國網(wǎng)絡(luò)環(huán)境的現(xiàn)狀，用于實(shí)際項(xiàng)目中顯然不現(xiàn)實(shí)。2、掃瞄器類型國內(nèi)掃瞄器市場異常富強(qiáng)，從IE6到各種殼的掃瞄器，他們對字體格式的支持也不一樣，字體格式轉(zhuǎn)換相當(dāng)繁瑣。3、操作系統(tǒng)相當(dāng)長的時(shí)期內(nèi)，WindowsXP操作系統(tǒng)是國內(nèi)的主流，而XP系統(tǒng)對字體渲染表現(xiàn)差勁，設(shè)計(jì)師難以接受WebFont的表現(xiàn)，而寧愿使用圖片。不過隨著XP系統(tǒng)市場份額急劇下降以及移動(dòng)設(shè)備的崛起，這個(gè)問題已經(jīng)變得不再那么重要了?？偨Y(jié)一下，中文WebFont首要解決的問題便是：壓縮與轉(zhuǎn)碼。三、現(xiàn)有的中文WebFont解決方案1.本地制作通過字體制作工具來刪除沒有使用的字符，即制作精簡版字體，這也是我之前實(shí)踐過的方案。2.字體云服務(wù)國內(nèi)目前有兩家公司供應(yīng)中文WebFont云托管服務(wù)，他們能夠壓縮與轉(zhuǎn)碼字體：

（有字庫）

（就是字）三、現(xiàn)有方案的問題在實(shí)踐中，通過工具制作精簡版字體異常繁瑣，它需要仔細(xì)核對字符，修改特別麻煩，效率低下且容易遺漏字符而導(dǎo)致出錯(cuò)。第三方云服務(wù)最大的問題是無法保證穩(wěn)定性，能否支撐海量用戶訪問還是個(gè)問號，至少目前這兩家中文WebFont平臺中還沒有大型商業(yè)站點(diǎn)的案例，大多都是一些小型個(gè)人或企業(yè)網(wǎng)站在使用。四、本地自動(dòng)化WebFont壓縮設(shè)想出于性能以及可控性的考慮，我們排解了第三方云服務(wù)方案，嘗試設(shè)計(jì)本地自動(dòng)化方案。和小伙伴商量的過程中，我們想到了之前有同事做過自動(dòng)化切圖的工具，原理是用腳本操作Photoshop，那么我們是否同樣可以編寫腳本讓字體工具自動(dòng)化的操作呢？理論上OK，值得我們?nèi)L試。字體壓縮關(guān)鍵在于刪除不必要的字符，我們可以指定一個(gè)配置文件來指定字體以及其所使用的字符，然后操作字體工具精簡字體即可。前面提到，如果手工配置字體所使用的字符可能會遺漏，這里也能否實(shí)現(xiàn)自動(dòng)化的提?。快`感總是在不經(jīng)意間消失，我們將目光又朝向了CSS，由于CSS本身就一個(gè)完整的配置文件：它的@font-face語句記錄著字體名稱與文件路徑，選擇器記錄著字體使用范圍，而CSS選擇器又與HTML文檔相對應(yīng)，HTML文檔又可以使用選擇器來查找節(jié)點(diǎn)與文本。五、字蛛誕生為了實(shí)現(xiàn)上述設(shè)想，我們需要擁有這三個(gè)小伙伴：分析模塊：負(fù)責(zé)收集字體與字體使用的字符壓縮模塊：負(fù)責(zé)刪除字體中沒有使用的字符實(shí)現(xiàn)壓縮轉(zhuǎn)碼模塊：負(fù)責(zé)將字體轉(zhuǎn)換成跨掃瞄器使用的格式借助開源的力氣，工具的Demo版本被迅速的實(shí)現(xiàn)出來。感謝以下開源項(xiàng)目：css.js：它能將CSS解析成語法樹，并且能夠較好的容錯(cuò)適應(yīng)各種hack語法jsdom：它能夠在NodeJS中實(shí)現(xiàn)W3CDOMAPI，使得我可以使用

document.querySelectorAll()

方法輸入CSS選擇器來查找HTML節(jié)點(diǎn)上的文本font-optimizer：這是一個(gè)使用Perl編寫的字體優(yōu)化工具，可以高效的刪除字體中指定的字符ttf2eot、ttf2woff、ttf2svg：是它們完成了跨掃瞄器字體格式轉(zhuǎn)碼的工作成果指定HTML文件路徑就可以自動(dòng)化的壓縮與轉(zhuǎn)碼字體，過程中完全無需人工干預(yù)，可以便利的集成在前端發(fā)布系統(tǒng)中。開源不斷的完善后，我們