欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

三年前，有一個(gè)設計師面試一位 Web 前端工程師，其中有一段這樣的對話(huà)：

“如果設計師希望用圖片實(shí)現某個(gè)字體樣式，而從技術(shù)的角度來(lái)說(shuō)這樣不合理，但設計師非常堅持，這時(shí)候你怎么辦？”

“我會(huì )給設計師講解工程上面臨的問(wèn)題，爭取他理解。例如：如果文本使用圖片，以騰訊站點(diǎn)的訪(fǎng)問(wèn)量來(lái)說(shuō)，這里會(huì )需要消耗大量的服務(wù)器資源，至少需要增加 XXX 臺服務(wù)器，帶寬流量消耗 XXX 萬(wàn)”。

這是一段真實(shí)的面試場(chǎng)景，而我就是那位被面試者。這些年 Web 前端技術(shù)在迅猛的發(fā)展，這樣的問(wèn)題已經(jīng)有了解決方案——WebFont，如果再回到當年面試的場(chǎng)景，我會(huì )給出更好的答案。

WebFont 技術(shù)可以讓網(wǎng)頁(yè)使用在線(xiàn)字體，而無(wú)需使用圖片，從而有機會(huì )解決開(kāi)頭設計師提到的問(wèn)題。它通過(guò) CSS 的 @font-face 語(yǔ)句引入在線(xiàn)字體，使用 CSS 選擇器指定運用字體的文本，與此同時(shí)專(zhuān)用于 Web 展示的 woff 格式字體也得到各大瀏覽器廠(chǎng)商支持，進(jìn)一步減少了字體的體積。在國外，WebFont 已經(jīng)非常流行了，大量的網(wǎng)站使用了 WebFont 技術(shù)，而業(yè)界大佬 Google 也順勢推出的免費 WebFont 云托管服務(wù)，這一切均帶動(dòng)了國外字體制作行業(yè)的高速發(fā)展。

一、WebFont 的優(yōu)勢

相對圖片，WebFont 有如下優(yōu)勢：

1. 支持選中、復制
2. 支持 Ctrl+F 查找
3. 對搜索引擎友好
4. 支持工具翻譯
5. 支持無(wú)障礙訪(fǎng)問(wèn)，支持朗讀
6. 字體是矢量圖形，支持矢量縮放，自動(dòng)適配高清屏
7. 文本修改方便
8. 字形可以重復利用，節省網(wǎng)絡(luò )資源

二、中文 WebFont 的困境

既然 WebFont 有如此多優(yōu)勢，為何中文站點(diǎn)依然很少采用？這里主要是三個(gè)“中國特色”造成的：

1、中文字體體積

英文只有 26 個(gè)字母，一套字體不過(guò)幾十 KB；而漢字卻有數萬(wàn)個(gè)，導致字體文件通常有好幾 MB 大小，文件體積比英文字體大數百倍，按照中國網(wǎng)絡(luò )環(huán)境的現狀，用于實(shí)際項目中顯然不現實(shí)。

2、瀏覽器類(lèi)型

國內瀏覽器市場(chǎng)異常繁榮，從 IE6 到各種殼的瀏覽器，他們對字體格式的支持也不一樣，字體格式轉換相當繁瑣。

3、操作系統

相當長(cháng)的時(shí)期內，Windows XP 操作系統是國內的主流，而 XP 系統對字體渲染表現差勁，設計師難以接受 WebFont 的表現，而寧愿使用圖片。不過(guò)隨著(zhù) XP 系統市場(chǎng)份額急劇下降以及移動(dòng)設備的崛起，這個(gè)問(wèn)題已經(jīng)變得不再那么重要了。

總結一下，中文 WebFont 首要解決的問(wèn)題便是：壓縮與轉碼。

三、現有的中文 WebFont 解決方案

1. 本地制作

通過(guò)字體制作工具來(lái)刪除沒(méi)有使用的字符，即制作精簡(jiǎn)版字體，這也是我之前實(shí)踐過(guò)的方案。

2. 字體云服務(wù)

國內目前有兩家公司提供中文 WebFont 云托管服務(wù)，他們能夠壓縮與轉碼字體：

• http://www.youziku.com （有字庫）
• http://cn.justfont.com （就是字）

三、現有方案的問(wèn)題

1. 在實(shí)踐中，通過(guò)工具制作精簡(jiǎn)版字體異常繁瑣，它需要仔細核對字符，修改非常麻煩，效率低下且容易遺漏字符而導致出錯
2. 第三方云服務(wù)最大的問(wèn)題是無(wú)法保證穩定性，能否支撐海量用戶(hù)訪(fǎng)問(wèn)還是個(gè)問(wèn)號，至少目前這兩家中文 WebFont 平臺中還沒(méi)有大型商業(yè)站點(diǎn)的案例，大多都是一些小型個(gè)人或企業(yè)網(wǎng)站在使用

四、本地自動(dòng)化 WebFont 壓縮設想

出于性能以及可控性的考慮，我們排除了第三方云服務(wù)方案，嘗試設計本地自動(dòng)化方案。和小伙伴討論的過(guò)程中，我們想到了之前有同事做過(guò)自動(dòng)化切圖的工具，原理是用腳本操作 Photoshop，那么我們是否同樣可以編寫(xiě)腳本讓字體工具自動(dòng)化的操作呢？理論上 OK，值得我們去嘗試。

字體壓縮關(guān)鍵在于刪除不必要的字符，我們可以指定一個(gè)配置文件來(lái)指定字體以及其所使用的字符，然后操作字體工具精簡(jiǎn)字體即可。

前面提到，如果手工配置字體所使用的字符可能會(huì )遺漏，這里也能否實(shí)現自動(dòng)化的提??？

靈感總是在不經(jīng)意間出現，我們將目光又朝向了 CSS，因為 CSS 本身就一個(gè)完整的配置文件：它的 @font-face 語(yǔ)句記錄著(zhù)字體名稱(chēng)與文件路徑，選擇器記錄著(zhù)字體使用范圍，而 CSS 選擇器又與 HTML 文檔相對應，HTML 文檔又可以使用選擇器來(lái)查找節點(diǎn)與文本。

五、字蛛（Font-Spider）誕生

為了實(shí)現上述設想，我們需要擁有這三個(gè)小伙伴：

• 分析模塊：負責收集字體與字體使用的字符
• 壓縮模塊：負責刪除字體中沒(méi)有使用的字符實(shí)現壓縮
• 轉碼模塊：負責將字體轉換成跨瀏覽器使用的格式

借助開(kāi)源的力量，工具的 Demo 版本被迅速的實(shí)現出來(lái)。感謝以下開(kāi)源項目：

• css.js：它能將 CSS 解析成語(yǔ)法樹(shù)，并且能夠較好的容錯適應各種 hack 語(yǔ)法
• jsdom：它能夠在 NodeJS 中實(shí)現 W3C DOM API，使得我可以使用 document.querySelectorAll() 方法輸入 CSS 選擇器來(lái)查找 HTML 節點(diǎn)上的文本
• font-optimizer：這是一個(gè)使用 Perl 編寫(xiě)的字體優(yōu)化工具，可以高效的刪除字體中指定的字符
• ttf2eot、ttf2woff、ttf2svg：是它們完成了跨瀏覽器字體格式轉碼的工作

成果

指定 HTML 文件路徑就可以自動(dòng)化的壓縮與轉碼字體，過(guò)程中完全無(wú)需人工干預，可以方便的集成在前端發(fā)布系統中。

開(kāi)源

不斷的完善后，我們將工具命名為——字蛛（Font-Spider），并回饋給開(kāi)源社區，希望它能夠為中文 WebFont 的發(fā)展出一份力，讓更多的中文站點(diǎn)可以使用精美的字體。套用一句話(huà)來(lái)結束本文：技術(shù)方案會(huì )遲到，但從不會(huì )缺席。