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