国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

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

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

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

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

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

一、WebFont 的優(yōu)勢

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

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

二、中文 WebFont 的困境

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

1、中文字體體積

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

2、瀏覽器類型

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

3、操作系統(tǒng)

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

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

三、現(xiàn)有的中文 WebFont 解決方案

1. 本地制作

通過字體制作工具來刪除沒有使用的字符，即制作精簡版字體，這也是我之前實踐過的方案。

2. 字體云服務(wù)

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

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

三、現(xiàn)有方案的問題

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

四、本地自動化 WebFont 壓縮設(shè)想

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

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

前面提到，如果手工配置字體所使用的字符可能會遺漏，這里也能否實現(xiàn)自動化的提??？

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

五、字蛛（Font-Spider）誕生

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

• 分析模塊：負(fù)責(zé)收集字體與字體使用的字符
• 壓縮模塊：負(fù)責(zé)刪除字體中沒有使用的字符實現(xiàn)壓縮
• 轉(zhuǎn)碼模塊：負(fù)責(zé)將字體轉(zhuǎn)換成跨瀏覽器使用的格式

借助開源的力量，工具的 Demo 版本被迅速的實現(xiàn)出來。感謝以下開源項目：

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

成果

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

開源

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