DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 中文網頁字體:網頁設計師的字體替換方法
中文網頁字體:網頁設計師的字體替換方法
編輯:關於網頁技巧     

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

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

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

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

使用非標准字體,最好的方案依然是圖片替換。關於圖片替換術已有許多文章論述,方法也各有優劣,需要注意的關鍵點是:
1 可用性:注意在無CSS或無圖片的情況下,依然能保證文檔內容的完整性。盡量減少額外無意義的標簽。
2 圖片負載:利用GIF、PNG8、JPG各自的特點,有針對性地制作替換圖片,能有效地減少不必要的圖片尺寸。在幾種格式中,首推PNG8,即使在IE6中它的透明背景也能被正確顯示。PNG8使用的技巧是,輸出時把“雜邊”設置為和背景接近的顏色。

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

============翻譯開始的分割線=============

原文地址:http://webdesign.tutsplus.com/articles/typography-articles/a-web-designers-guide-to-font-replacement-methods/

受夠了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,但實現起來容易得多
  • 他們處理所有的授權相關的事項
  • 數百種字體可供挑選
  • 包含多種格式(TrueType, EOT, WOFF, SVG, Cufon等等)
  • 如果他們沒有你想要的字體,你甚至可以生成你自己的套件

缺點:

  • 和@font-face一樣,不過通常來說,這是一個非常棒的解決方案

Google Fonts API

Google Fonts API的使用結合了他們自己非常獨有的字體目錄,目錄中的所有的字體都是開源的,所有人都能使用。這個目錄一直都在擴展和增長,目前已經包含了超過200個例子。

要把目錄中的字體用在你的網站上,真是簡單得不能再簡單了。你只需要選擇你想用的字體,選擇想要的字體變體,Google會向你提供一行你需要用的Javascript代碼。修改css,列出這個字體,你就准備好了!這真的非常簡單。

優點:

  • 開源授權意味著這些都是免費使用的
  • 字體放在Google的服務器上,所以你的字體可能已經在浏覽器的緩存中

缺點:

  • 呃……

Typekit

Typekit是第一個提供預訂網頁字體服務的網站,並仍然非常流行。Typekit以及其他類似的服務網站解決字體授權的方法是:繳納年費,會員就能訪問大量的自定義字體。這種方法允許字體的制造商為他們努力的工作收到一些回報,並防止了字體的盜版,因為所有的字體都放在Typekit的受保護的服務器上。用戶不用把字體放在他們自己的網站空間裡,只需要簡單的鏈接即可。

Typekit和一些世界上最大的字體制造商合作,為你提供了廣泛而多樣的字體。Typekit還提供了很多字體使用的選項和控制。你可以選擇不同的字體變體、粗體和字型。你還可以創建CSS棧,選擇當@font-face不被支持時的降級字體。一旦你做好了選擇,網站會生成一段需要你放在網站上的Javascript代碼。

Typekit的另一個優點是它能微調字體,幫助控制不同浏覽器處理文本和字體的差異。

Typekit提供了不同的價格包以適應不同的需求。免費的包提供Trial Library中的兩個字體,只能在一個網站上使用。這個網站每月最多允許25,000次頁面浏覽(Page View),並且你必須在網站中顯示Typekit的標志,鏈接到你使用字體的信息。而相應的,規模最大的是性能包(Perfomance package),它提供所有字體的使用權限,不限網站數量和浏覽量。所有這些的年費是99鎊。

優點:

  • 字體選擇很多
  • 字體放在Typekit的服務器上

缺點:

  • 每年都需要交錢
  • 抗噪不是很完美,一些字體可能在一些浏覽器和操作系統中看起來有鋸齒,沒有抗噪

Fonts.com Web Fonts

流行的字體資源font.com也開啟了一項專門的網頁字體服務,他們自稱提供了超過8,000種字體由你在網站上使用。和Typekit類似,它提供的是基於的預訂的服務,但它的價格是月度的。和Typekit相比,它的價錢並不貴,但字體的限制要少得多。免費包相比之下相當的友好——無限制地使用8,000種字體,不限網站數量。專業包允許你下載50種字體到你的電腦中,並在設計中使用這些字體。

Fonts.com網頁字體自誇他們的字體集中有一些真的非常棒的字體——例如Helvetica, Univers和Franklin Gothic。

優點:

  • 非常多可選擇的字體和樣式
  • 字體放在Typekit的服務器上
  • 獨有的Helvetica®、 Frutiger®、 Univers® 和其他有名的字體

缺點:

  • 如果他們的免費服務無法滿足你,需要交年費
  • 他們的字體庫其實相當的大,但能使用的很有限

Fontdeck

曾為一些世界上最大的企業服務的著名網頁設計公司Clear Left與OmniTI合作,發布了Font Deck。Font Deck是另一個基於預訂的服務商,但你只需要為使用的每個單獨的字體付年費,這對那些只想在個人博客中使用一到兩個字體的人來說很完美。

字體的價格最低為單個域名2.5美元/年,不限頁面浏覽量。全部的字體都可以無限期免費試用,但只有20個獨立IP可以浏覽。這個免費包有助於彌補無法下載字體到本地的缺點,你在設計階段就能使用它們。因為Font Deck相對來說很新,目前字體的選擇很少。

優點:

  • 只需要為你需要的付費
  • 在網站上預覽字體是免費的
  • 語言支持

缺點:

  • 它依然是需要付費的
  • 他們的字體庫其實相當的大,但能使用的很有限

Font Spring

Font Spring采用了和預訂服務有些許區別的方法,它回到了傳統的購買字體的路子上。字體是獨立購買的,你需要下載他們,並放在自己的服務器上。Font Spring認為提供的字體中99.9%都可以通過@font-face方式使用。

每個獨立的字體的價格都不一樣,要用@font-face方式使用字體,你需要額外支付費用。@font-face授權包括桌面OpenType版本和在web上需要的其他格式。

用這個方法有很多的優點,如果你真的只心儀一種字體,和預訂服務相比這可能會更便宜。你可以在任意多的域名中使用,因為你能直接控制它們,並且頁面浏覽量也沒有限制。

作為一個附加的警告,使用其他技術如sIFR或者Cufón轉換或植入這些字體是被禁止的。

優點:

  • 像Font Squirrel一樣,它為你處理了授權相關事項
  • 又一個很棒的字體庫,有很多不同的字體制造商

缺點:

  • 每一個字體都需要付費,這可能需要很多錢
  • 你需要把字體放在自己服務器上

其他字體替換解決方案

這些只是可用的字體服務中的一部分。還有很多提供服務的網站,例如Typotheque和Webtype。他們都各有優勢和劣勢,你應該基於個人的需要做出選擇。一些人可能看中預訂服務的簡便,而另一些人可能不喜歡把網站的一部分控制權交給第三方。如果你是後一種情況,你最好使用像Font Squirrel這樣的,下載你自己的字體,並放自己的服務器上。

接下來的兩個(sIFR和FLIR)通常被認為是“守舊派”,因為它們都有很明顯的問題,但是它們是值得討論和了解的。

sIFR

sIFR已經出現了好一段時間了。當我們確實除了圖片沒有其他選擇時,它第一個出現了,提供了一個很有效的引入非標准字體的方法。sFIR(即Scalable Inman Flash Replacement)結合使用了Flash和Javascript來將頁面上的文本修改為Flash元素。sIFR有許多優點,例如文本保持了對屏幕讀者的可用性,也可以被選擇。

然而名字中的“scalable”可能會造成一些混淆。sIFR的可放大的意義是,Flash元素放大至原有浏覽器文本的尺寸——這允許它擁有最大的尺寸可能性,能以任何給定的尺寸顯示文本。然而,當用戶調整頁面的文本尺寸時,任何已經被Flash元素替換的文本大小是無法改變的。這顯然會造成一些可用性問題。sIFR同樣需要用戶的電腦啟用Flash和Javascript才能起作用。

sFIR的創造者之一,Mike Davidson同樣認識到這項技術的局限性。Mike曾公開表示,sFIR不應該被用於大段的文本,因為它會對網站的性能有顯著的影響。Mike同樣認識到他的技術並不是網頁排印的最終解決方案,他只是簡單的引用了這個詞“權宜之計”。

優點:

  • 沒什麼大的優點……除了它是出現的第一個字體替換方法。

缺點:

  • 依賴於Flash
  • 降低性能
  • 阻攔廣告和Flash的程序也會阻攔它
  • 很難完美地修改樣式——常常和你期待的效果不一樣

FLIR

FLIR(即Facelift Image Replacement)和sIFR類似,除了它使用Javascript和PHP來生成圖片,而不是使用Flash來替換文本。這種方法明顯的好處是,你不需要花時間為每一段你想用自定義字體的文本創建單獨的圖片。如果你覺得用另一種字體或者顏色,更新你網站的文本也會更容易一些。

不幸的是,FLIR除了使用簡便和節省時間以外,相比傳統的將文本存成圖片,它並沒有提供更多改進。最終結果是文本依然以圖片的形式渲染,文字無法被選擇或放大。
優點:

  • 在所有主流浏覽器中都能工作

缺點:

  • 較大的負載
  • 文本無法被選擇
  • 服務器需要支持PHP和GD……這往往是不提供的

字體授權和合法性

字體授權問題正在不斷發展。它有助於字體替換方法的緩慢進程和采用。就像圖片一樣,你需要作者的授權才能在網站中使用字體,授權是以EULA(End User License Agreement終端用戶授權協議)的形式。一些授權允許字體被免費使用,甚至用在商業用途中。而另一些可能只允許個人在本地的電腦上使用。

當使用上述的某種字體替換方法時,你實際上在你的網站植入了一個字體,或者鏈接到一個上傳到你服務器的字體。即使是免費的字體授權,這也是不允許多人使用的。許多字體創造者和制造商都不允許這樣的原因是,它會讓網站的用戶直接訪問字體文件,他們開始擔心他們的字體可能被下載並非法傳播。這個問題讓很多字體制造者不允許他們的字體通過@font-face使用。

因此,當使用上述的方法時,你絕對要確認字體的授權是允許的,這非常的重要。

還好,這個問題沒有完全阻礙字體替換方法的發展,還有很多可用的資源允許你在網站上使用自定義的字體。

最後的思考:這對設計師們意味著什麼

“Perfection is not worth waiting for, if you do, you risk missing out on exciting new opportunities”
完美不值得等待,如果你這麼做了,你在冒險錯過那些令人興奮的新機會。

上面我們討論了很多,對於想在站點設計中使用自定義字體的人來說,很顯然有很多種選擇。好消息是,所有的方法現在都是可用的。而壞消息是,沒有一種方法是完美的,每一種都有他們自己的優點和缺點,這是實話。@font-face顯然是最有希望的,但可能還要過好多年,它才能算得上絕對沒問題。事實是,雖然在網頁設計的世界裡,情況很難說完美,但是還有很多折中方案,而這些方案需要使用新的技術。完美並不值得等待,如果你這麼做了,你在冒險錯過那些令人興奮的新機會。

這真的是網頁設計的一個令人興奮的時代,網頁的排印似乎正在得到更多的欣賞和理解。字體替換方法為創造有創意的新設計提供了很棒的機會,並且我相信,關鍵在於不要濫用這項技術。當情況出現問題時總是提供降級的方案,聰明地使用每一種方法(不要像這樣改掉你網站所有的文本)。多花一些時間,欣賞和學習偉大的字體,網頁會是一個更好的使用字體的地方。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved