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