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