版式是一種強(qiáng)大的工具，“可以通過(guò)它闡明、認(rèn)同和分享文本的含義（或者它缺少含義），或者有意地進(jìn)行偽裝。”版式的這個(gè)經(jīng)典的定義來(lái)自于Robert Bringhurst的The Elements of Typographic Style，它同樣適用于web版式，其中涉及在幾毫秒的時(shí)間內(nèi)抓住讀者的注意力—否則就會(huì)失去他們，使得他們光顧另一個(gè)網(wǎng)站、另一個(gè)鏈接或者另一種吸引人的聲音。
在The Elements of Typographic Siyle (它被看作是版式的圣經(jīng)) --書(shū)的前言中。Robert Binghurst指出版式的基礎(chǔ)原則獨(dú)立于任何特定的排版媒介。然而在經(jīng)過(guò)差不多20年在Web上設(shè)置字體的痛苦之后，設(shè)計(jì)師終于可以揚(yáng)眉葉氣且可以在不危及細(xì)節(jié)或?qū)崿F(xiàn)的情況下應(yīng)用必要的樣式元素。近幾年在確定web版式的未來(lái)方面扮演著至關(guān)重要的角色:僅僅幾年前還無(wú)法想象的事情在今天已經(jīng)變成了可能，并且將在明天甚至?xí)兊酶谩?br /> 字體設(shè)計(jì)師Jos Buivenga 聲稱“Web上的文字正在變得莊重”，他認(rèn)為Web版式設(shè)計(jì)非常有前途一對(duì)于字體設(shè)計(jì)師和 Web設(shè)計(jì)師都是如此。Jon Tan熱情地把Web版式的當(dāng)前狀況稱為“繁榮興旺”“對(duì)于Web版式來(lái)說(shuō)，現(xiàn)在是一個(gè)振奮人興的時(shí)刻。”Stephen Coles贊許地說(shuō)道，“新技術(shù)、使用文字的新方式，以及專”]為新媒介創(chuàng)建的新字體層出不窮。”在過(guò)去幾年不是如此令人興奮，因?yàn)闆](méi)有公共的標(biāo)準(zhǔn),并且只會(huì)在字體供應(yīng)商、瀏覽器制造商和用戶當(dāng)中引起關(guān)于“Web上的字體應(yīng)該如何工作” 的爭(zhēng)論。
1.web版式的演化
在過(guò)去幾年發(fā)生了什么事情使設(shè)計(jì)師對(duì)web上的版式的狀況感到如此激動(dòng)和樂(lè)觀？自從1995年以來(lái)我們的確走了一段很長(zhǎng)的路，當(dāng)時(shí)Netscape首次把<font>標(biāo)簽添加到HTML中。Web設(shè)計(jì)師沒(méi)用多長(zhǎng)時(shí)間就對(duì)他們的排版選項(xiàng)如此受限制以及HTML如此受內(nèi)容和樣式的控制感到不滿意。第二年，發(fā)布了第一個(gè)CSS(層疊樣式表)規(guī)范，用于把表示與結(jié)構(gòu)分隔開(kāi)。
CSS”不僅可以使web文檔更漂亮”，Bert Bos寫(xiě)道，他于1996年加入W3C(萬(wàn)維網(wǎng)聯(lián)盟)并從事與CSS相關(guān)的工作，“它還為與我們的語(yǔ)義web的目標(biāo)相背離的實(shí)踐活動(dòng)提供替代方案：<font>標(biāo)簽、替代文本的圖像、分隔符元素。我們希望HTML文檔可訪問(wèn)、獨(dú)立于設(shè)備、容易維護(hù)并且可重用，因此我們嘗試把文本/結(jié)構(gòu)與樣式分隔開(kāi)，使其盡可能容易和有吸引力。”
在Web上利用CSS屬性編排文本樣式變得如此容易和高效，它們可以控制字母之間的間距、文字、定位、方向、文本顏色和樣式。一個(gè)問(wèn)題得到了解決, 但是還有許多問(wèn)題仍然有待解決，包括不能指定用戶的機(jī)器.上不存在的字體。Web設(shè)計(jì)師別無(wú)選擇，只能使用多種文本替代技術(shù)以顯示非Web安全的字體，比如靜態(tài)圖像替代、sIFR、 Cufon、 typeface.js 和Facelift。每種技術(shù)都有它自己的問(wèn)題:增加的頁(yè)面加載時(shí)間和頁(yè)面大小、對(duì)第三方應(yīng)用程序或JavaScript的依賴、不可選擇的文本，或者費(fèi)時(shí)的文本更新和文本生成。上述的所有技術(shù)都不建議用于大塊的文本。顯然，需要一種更直觀、更自然的排版方法。
       當(dāng)CSS2規(guī)范于1998年發(fā)布時(shí)，給設(shè)計(jì)師引|薦了@font-face規(guī)則，它通過(guò)鏈接到不屬于核心Web安全字體一部分的字體， 可以改進(jìn)字體選擇過(guò)程。然而，許多事情都出錯(cuò)了。Microsoft 和Netscape在它們的瀏覽器中選擇不同的方法來(lái)支持Web字體，而不是支持使用最廣泛的字體格式，即TrueType。Netscape 支持TrueDoc ; Microsoft則開(kāi)發(fā)了專有的eOT ( Embedded OpenType Format, 嵌入式OpenType格式),它盡管得到了Adobe和Monotype字體服務(wù)商的支持，但是沒(méi)有獲得更廣泛的認(rèn)可，因?yàn)橛脩舨幌肱c錯(cuò)綜復(fù)雜的、僅屬于Microsoft的技術(shù)打交道。
十年后，@font -face王者歸來(lái)，并且現(xiàn)在看起來(lái)仍然是這樣。2007 年，Microsoft為所有人開(kāi)放了EOT,并把它們的EOT提議提交給W3C。不過(guò)這一一次，由于DRM ( Digit Rights Management,數(shù)字版權(quán)管理)顧慮，其他的劉覽器供應(yīng)商拒絕支持它。Microsoft 用于把.tf字體轉(zhuǎn)換成.eot 的工具(稱為WEFT，web嵌入式字體工具)并沒(méi)有起到應(yīng)有的作用。許多人發(fā)現(xiàn)使用它時(shí)令人混淆并且使人受挫，促使開(kāi)發(fā)人員尋找其他的選擇。
顯然，這時(shí)需要新的格式:它包含OPenType.無(wú)需許可、只景碼并且至少與EOT一樣高效。這樣- "種格式是WOFF(web開(kāi)放字體格式)，它是字體設(shè)計(jì)師Formuat, Web開(kāi)放字體格式)，它是字體設(shè)計(jì)師Erikvan Boklnd和TalLeming在Moilla的Jonathan Kew的幫助下協(xié)同工作的成果，并月由, Web字體工作組( Web Fonts Working Group)進(jìn)行了進(jìn)一步的開(kāi)發(fā)Dagget牽頭的Moilla Firefox 3.6成為第一款帶有WOFF支持的瀏收盟Microsoft在Internet Explorer 9中添加了對(duì)WOFF的完全支持:Co "，Chrome在版本5.0中添加了對(duì)它的支持，WebKit也將添加WOFF支持2009年2月，字體編輯器FontForge添加了WOFF支持，因此現(xiàn)在可以直接把字體導(dǎo)出為WOFF。
WOFF是基于sfint的字體(如TrueType Font或TF、OpenType Font或OTF、Open Font Fomat或OFF )的重新打包的壓縮版本，導(dǎo)致其下載大小比OpenType和TrueType字體要小得多。WOFF包括可選的元數(shù)據(jù)，允許字體供應(yīng)商利用元數(shù)據(jù)和私用數(shù)據(jù)標(biāo)記它們的字體一這是 WOFF得到了主要的字體造字商支持的主要原因。作為一種通用的Web字體標(biāo)準(zhǔn)，WOFF 1.0 通過(guò)使用真實(shí)的文本代替圖像或者多種文本替代技術(shù)，有助于推進(jìn)Web上豐富的版式，在線保留品牌標(biāo)識(shí)以及改進(jìn)網(wǎng)站的可訪問(wèn)性，使得它們更容易被搜索引擎發(fā)現(xiàn)。使用WOFF的另一個(gè)同等重要的好處是:使用其他語(yǔ)言創(chuàng)建網(wǎng)站成為可能，其中-些語(yǔ)言沒(méi)有廣泛可用的字型。
“對(duì)于Web設(shè)計(jì)師來(lái)說(shuō)，WOFF意味著甚至更多的文字服務(wù)商將參與web許可.并且可以利用多種方式購(gòu)買字型許可。你可能已經(jīng)從FonFror獲得了WOFF文件的許可證“，Typekit的文字經(jīng)理Tim Brown這樣說(shuō)道，Typekit是最早的web字體交付和托管服務(wù)之一。
2.當(dāng)今web版式的狀況
       回到2006年,Oliver Richensein憑借一個(gè)大膽的聲明動(dòng)搖了設(shè)計(jì)秩序，他聲明動(dòng)搖了涉及秩序，他聲稱“web上95%的信息都是書(shū)面語(yǔ)言，web設(shè)計(jì)師應(yīng)該在形成書(shū)面語(yǔ)言的主要學(xué)科（即版式）中獲得良好培訓(xùn)的說(shuō)法是最合乎邏輯的。“如果他是在今天寫(xiě)出這篇文章，將不會(huì)如此有爭(zhēng)議?；氐侥莻€(gè)時(shí)代，F(xiàn)lash和”漂亮的圖片“統(tǒng)治著設(shè)計(jì)界；數(shù)量有限的系統(tǒng)字體使圖形設(shè)計(jì)師感到沮喪，并且不足以激勵(lì)主要依靠自學(xué)成才的web設(shè)計(jì)師突破web版式的限制。
       所有這些改變都要?dú)w功于一串偶然發(fā)現(xiàn)的事件一從 John Boardley的網(wǎng)站ioeTypogaphly com (專用于各種文字)的成功啟動(dòng)，到CSS版式中的最新進(jìn)展和@font- face的王者歸來(lái)，到字體交付服務(wù)(如Typekit或Fontdeck)的建立和Web字體的瀏覽器級(jí)支持，再到才華橫溢的Web設(shè)計(jì)師憑借出色的觀察力快速掠過(guò)版式細(xì)節(jié)，他們突破了在Web上利用版式可以實(shí)現(xiàn)什么效果的界限。突然,設(shè)計(jì)界開(kāi)始以一種新的眼光看待Web版式，沉迷于文字的設(shè)計(jì)師停止了只考慮到安全的保守做法，開(kāi)始在屏幕上試驗(yàn)各種文字，并從中獲得樂(lè)趣。
       一些Web設(shè)計(jì)師擴(kuò)展了他們的css字體庫(kù)，補(bǔ)充了對(duì)于Web非傳統(tǒng)的字體。這些字體允許他們]把設(shè)計(jì)打扮得整整齊齊，并把它們帶到下一個(gè)層次。其他設(shè)計(jì)師(尤其是“版式不是關(guān)于選擇一種很酷的字體”這個(gè)觀點(diǎn)的支持者)通過(guò)只堅(jiān)持使用十種核心Web字體中的一兩種字體來(lái)愉悅我們的眼睛。不過(guò)，絕大多數(shù)網(wǎng)站在版式方面仍然有所滯后。2005 年, Richard Rutter 決定通過(guò)發(fā)布他的網(wǎng)站The Elements of Typographic Style Applied to the web來(lái)幫助web設(shè)計(jì)師，他把該網(wǎng)站構(gòu)造成“逐步學(xué)習(xí)Bringhurst的工作原則，解釋了如何讓使用HTML和CSS中提供的技術(shù)來(lái)完成每個(gè)步驟“。
然而不幸的是，甚至在今天，具有丑陋的web版式的網(wǎng)站數(shù)量仍然遠(yuǎn)遠(yuǎn)多于令人賞心悅目的網(wǎng)站數(shù)量。“總體來(lái)講，Web 版式仍然十分低劣, 即使只考慮專業(yè)設(shè)計(jì)的網(wǎng)站也是如此。當(dāng)然也有許多確實(shí)很精美的Web版式的示例，怕是這些在宏大的商業(yè)Web模式中仍然極其少見(jiàn)。”Richard 說(shuō)道。不過(guò)，低劣的Web版式幾乎不涉及字型的選擇。Richard 認(rèn)為“它更多地涉及關(guān)注版式的細(xì)節(jié)、字行的長(zhǎng)度、深思熟慮的行距(字行的高度).正確的字型，以及關(guān)注版式的顏色、精心設(shè)計(jì)的邊距等。所有的小細(xì)節(jié)結(jié)合起來(lái)可以極大地改進(jìn)閱讀體驗(yàn)”。Richard 把人們?nèi)鄙賹?duì)版式的關(guān)注歸因于“歷史上缺少可供Web設(shè)計(jì)師使用的字型;一遍又- 遍地與相同的字體打交道導(dǎo)致在使用它們時(shí)不怎么上心，實(shí)際上應(yīng)該更留心才對(duì)”。