網頁設計師的字體替換方法指南

　　寫在這篇文章之前：中文網頁字體的窘境

　　在國外的設計師幸福地討論著如何不用圖片進行字體替換時，當Google Proudly地提供越來越多的web fonts時，使用中文的網頁設計師只能發出一聲歎息。中文世界的網頁字體窘境，不僅僅是由於中文符號過多造成的字體文件過大這樣的技術阻礙;更深一層的原因是，根本就沒有幾種可用的好字體。

　　一方面，盡管一些中文字體提供商也在致力於提供不同平台的解決方案，字體價格還是貴得令人乍舌，方正字庫的年費高達萬元，這對普通設計師來說很難承受。另一方面，制作中文字體是吃力不討好的事，幾千個符號和26個拉丁字母完全不在一個量級上;使用正版在中國一直是會呼吸的痛，花大力氣做出來的字體，拿不到多少錢，這又降低了制作好字體的積極性。

　　中文網頁的常用字體，過去只有“宋體”，現在微軟增加了“雅黑”，但“雅黑”還算不上安全字體。在迫不及待地使用雅黑時，我們仍然要注意降級問題。由於雅黑的字體大小、字距和宋體都有區別，我們需要注意降級後，各個用戶代理在排版上可能出現的問題。

　　使用非標准字體，最好的方案依然是圖片替換。關於圖片替換術已有許多文章論述，方法也各有優劣，需要注意的關鍵點是：

　　1 可用性：注意在無CSS或無圖片的情況下，依然能保證文檔內容的完整性。盡量減少額外無意義的標簽。

　　2 圖片負載：利用GIF、PNG8、JPG各自的特點，有針對性地制作替換圖片，能有效地減少不必要的圖片尺寸。在幾種格式中，首推PNG8，即使在IE6中它的透明背景也能被正確顯示。PNG8使用的技巧是，輸出時把“雜邊”設置為和背景接近的顏色。

　　總而言之，中文網頁的字體，還沒有接近完美的解決方法出現。就像下面這篇文章會告訴我們的，完美不值得等待，只有積極地采用更新的技術，創造更好的作品。而無論中英文字體，是否采用非標准字體永遠只是一個技術問題，更重要的是設計師對字體的理解。我們能否理解每一個字符方寸筆畫之間的蘊含的意味，並適當地用在設計中，這是我們這些相對落伍的中文世界設計師要艱難完成的任務。

　　正文：

　　受夠了Arial?厭倦了Times New Roman? 文字替換術(font-replacement methods)在過去的兩年中發生了顯著的改善，但如果你沒有持續關注這項技術，往往很難說出這些方法有什麼不同。這篇文章將討論現今可用的不同的文字替換技巧。

　　我們將探討每種技術的優點和缺點，字體使用授權，以及網絡上最好的字體資源，以便於你能在自己的網頁設計中開始使用它們。

　　入門：字體替換術

　　Since the beginning of the web， designers have been restricted to a limited number of fonts

　　從網頁誕生之初以來，設計師們一直被有限數量的字體所束縛。

　　網頁設計的潛力看起來正在一天天地增長。HTML5，CSS3和Javascript這樣的技術應用帶來了很多令人驚喜而有創造性的網站設計。從純文本的浏覽器時代以來，網頁已經走過一段很長的路。盡管如此，網頁設計中仍然有一個領域相對而言依然停滯不前。

　　在任何設計師的“兵工廠”裡，要創造網站的外觀和“感覺”，排版和字體選擇是不可或缺的元素。不幸的是，自網頁誕生之初，設計師們一直被有限數量的字體所束縛。能被大多數的網頁用戶正確顯示，設計師能安全地使用的，還能讓人提起興趣的字體是極少的，Helvetica，Arial和Georgia是其中的三種(別忘了Comic Sans)。

　　為了擺脫這種限制，用字體來表達創意，設計師使用的傳統方法是把文字合並到圖片中——然而這種方法有許多的缺點。增加了很多可用性問題，並隨著加載時間增加，網站的性能也相應地受到負面影響。

　　這篇文章會探討一些在網頁中不用圖片加入非標准字體的方法。我們會看到每個方法的優點和缺點，字體的使用授權，以及這項技術對網頁設計師到底意味著什麼。

　　Cufón

　　要在網頁中加入非標准字體，使用Cufón是一個簡單、有效得難以置信的辦法，它的功能不需要依賴服務端的語言或插件。Cufón只需要幾行 Javascript代碼就能工作，它使用HTML5的畫布特性渲染字體，並為Internet Explorer使用VML(Vector Mark-up Language向量可標記語言)渲染字體。

　　Cufón在主頁上提供了一個字體轉換工具，它能將你選擇的字體轉換為SVG，並為你創建一個Javascript文件，你需要在html中引用它。Nettuts+的Jeffrey Way曾寫過一篇關於如何在你的網頁中集成Cufón的step-by-step優秀教程。

　　Cufón對很多網頁設計師來說是一個很流行的選擇，因為它有許多優點，相對來說幾乎沒什麼缺點。它不依賴其它腳本語言或插件，這意味著它對相當大部分受眾都是可用的，並且被近期所有的主流浏覽器所支持，包括IE9。你還可以直接對Cufón替換的文字應用CSS樣式，包括比較新的CSS3特性，例如漸變。考慮到速度，它比sFIR要快得多，而且沒那麼密集，但它仍然不應該被用在主體的大段文字上。

　　優點：

　　不同的浏覽器間很不錯的兼容性

　　可以在你的字體中的只包含字符裡的特定集合(ABC，123，等等)，以便於控制文件體積。

　　CSS字體樣式在所有的浏覽器中都能保持(顏色、尺寸、陰影⋯⋯)

　　缺點：

　　文字無法選擇

　　表現：最好在頂部、標題和副標題中使用

　　特別的樣式(文字修飾、翻轉等)需要一些額外的工作。

　　@font-face

　　“@font-face is essentially the ultimate solution for fonts on the web.”

　　@font-face基本上是網頁中字體的最終解決方案。

　　在所有的字體替換方法中，@font-face可能是受到關注最多的。但這是有充分原因的。@font-face基本上是網頁中字體的最終解決方案，在它被真正的實現之前，其它技術都想替代它的位置。其實在CSS2特性中就包含了@font-face，但直到今天它才被廣泛地采用。

　　@font-face在網頁上實現自定義字體，使用的技術無非是CSS——這意味著不再依賴於Flash，PHP甚至Javascript。當使用@font-face時，渲染的是真正的字體，而不是向量對象或圖片，因此文本可以被選擇、放大，使用CSS修改樣式。

　　不幸的是，就像其它和網頁有關的事情一樣，首先阻礙@font-face發展的就是浏覽器(還有使用授權，我們會在下文中討論)。每一種主流浏覽器的字體格式是不同的。Internet Explorer使用.EOT(Embedded Open Type)，而近期的Firefox、Chrome、Safari和Opera都支持.ttf(True Type Format)。一些浏覽器也支持開放字體格式(Open Type Format)，iPhone和iPad則需要SVG(Scalable Vector Graphics)。這些很讓人費解，有時會令很多人望而卻步。謝天謝地，還有一線曙光。網頁開放字體格式(即.WOFF)被定為網頁字體的標准格式，W3C正在對其進行標准化。3.6以上版本的Firefox和5.0以上版本的Chrome已經支持這個格式，根據近期的聲明，IE9也支持這個格式。讓我們期待Opera和Safari也盡快參與進來。

　　關於@font-face，唯一還要提出的小問題是，因為它呈現的是真正的字體，不同的浏覽器和操作系統的渲染效果會有細微的區別。一些網頁字體服務會使用字體微調來協助修正這些細微的差異，字體微調會在浏覽器中平滑字體的輪廓，創造出更好看的字體。我們會更深入地探討這些服務。

　　如果你需要更多關於如何在網站中實現@font-face的信息，Jeffrey Way又一次提供了一篇非常有用的教程。

　　優點：

　　保持了可用性——這意味著它能優雅降級

　　支持Unicode

　　支持CSS字體樣式

　　缺點：

　　一些字體文件下載起來比較大

　　不同浏覽器之間沒有統一的格式

　　不允許發布(據我們所知)——在確認你的發布許可之前，不能在模板或主題中使用。

　　接下來的解決方案依賴於@font-face來實現——每一個多少都算是一種服務——這意味著：它們都使用同樣的基本技術，但是它們提供不同的字體庫，授權選項，以及支付計劃;是的，大部分是需要付費才能使用，但這可能就是所有網絡字體的未來。

　　Font Squirrel @font-face Kits

　　Font Squirrel或許是現在最流行的文字替換資源。Font Squirrel讓你忘掉所有對字體授權可能有的擔心，因為它提供的所有字體在商業上都是免費的。這個網站有數百種字體供選擇，從sans-serif到novelty風格的字體都有。

　　就像之前提到的，為了保證@font-face在所有浏覽器中都能工作，你需要幾種不同的字體格式，對此，Font Squirrel也有解決方案。網站提供了@font-face套件，其中有你需要的所有字體格式，以及HTML和CSS。如果你找不到你想用字體的 @font-face套件，他們同樣免費提供了生成器，能將你的字體轉換為所需的多種格式。使用生成器時，你需要保證你擁有使用這個字體的正確授權。

　　優點：

　　使用@font-face，但實現起來容易得多

　　他們處理所有的授權相關的事項

　　數百種字體可供挑選

　　包