寫在這篇文章之前：中文網(wǎng)頁(yè)字體的窘境

在國(guó)外的設(shè)計(jì)師幸福地討論著如何不用圖片進(jìn)行字體替換時(shí)，當(dāng)Google Proudly地提供越來(lái)越多的web fonts時(shí)，使用中文的網(wǎng)頁(yè)設(shè)計(jì)師只能發(fā)出一聲嘆息。中文世界的網(wǎng)頁(yè)字體窘境，不僅僅是由于中文符號(hào)過(guò)多造成的字體文件過(guò)大這樣的技術(shù)阻礙；更深一層的原因是，根本就沒(méi)有幾種可用的好字體。

一方面，盡管一些中文字體提供商也在致力于提供不同平臺(tái)的解決方案，字體價(jià)格還是貴得令人乍舌，方正字庫(kù)的年費(fèi)高達(dá)萬(wàn)元，這對(duì)普通設(shè)計(jì)師來(lái)說(shuō)很難承受。另一方面，制作中文字體是吃力不討好的事，幾千個(gè)符號(hào)和26個(gè)拉丁字母完全不在一個(gè)量級(jí)上；使用正版在中國(guó)一直是會(huì)呼吸的痛，花大力氣做出來(lái)的字體，拿不到多少錢，這又降低了制作好字體的積極性。

中文網(wǎng)頁(yè)的常用字體，過(guò)去只有“宋體”，現(xiàn)在微軟增加了“雅黑”，但“雅黑”還算不上安全字體。在迫不及待地使用雅黑時(shí)，我們?nèi)匀灰�注意降�?jí)問(wèn)題。由于雅黑的字體大小、字距和宋體都有區(qū)別，我們需要注意降級(jí)后，各個(gè)用戶代理在排版上可能出現(xiàn)的問(wèn)題。

使用非標(biāo)準(zhǔn)字體，最好的方案依然是圖片替換。關(guān)于圖片替換術(shù)已有許多文章論述，方法也各有優(yōu)劣，需要注意的關(guān)鍵點(diǎn)是：

1 可用性：注意在無(wú)CSS或無(wú)圖片的情況下，依然能保證文檔內(nèi)容的完整性。盡量減少額外無(wú)意義的標(biāo)簽。

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

總而言之，中文網(wǎng)頁(yè)的字體，還沒(méi)有接近完美的解決方法出現(xiàn)。就像下面這篇文章會(huì)告訴我們的，完美不值得等待，只有積極地采用更新的技術(shù)，創(chuàng)造更好的作品。而無(wú)論中英文字體，是否采用非標(biāo)準(zhǔn)字體永遠(yuǎn)只是一個(gè)技術(shù)問(wèn)題，更重要的是設(shè)計(jì)師對(duì)字體的理解。我們能否理解每一個(gè)字符方寸筆畫之間的蘊(yùn)含的意味，并適當(dāng)?shù)赜迷谠O(shè)計(jì)中，這是我們這些相對(duì)落伍的中文世界設(shè)計(jì)師要艱難完成的任務(wù)。

正文：

受夠了Arial？厭倦了Times New Roman？ 文字替換術(shù)（font-replacement methods）在過(guò)去的兩年中發(fā)生了顯著的改善，但如果你沒(méi)有持續(xù)關(guān)注這項(xiàng)技術(shù)，往往很難說(shuō)出這些方法有什么不同。這篇文章將討論現(xiàn)今可用的不同的文字替換技巧。

我們將探討每種技術(shù)的優(yōu)點(diǎn)和缺點(diǎn)，字體使用授權(quán)，以及網(wǎng)絡(luò)上最好的字體資源，以便于你能在自己的網(wǎng)頁(yè)設(shè)計(jì)中開(kāi)始使用它們。

入門：字體替換術(shù)

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

從網(wǎng)頁(yè)誕生之初以來(lái)，設(shè)計(jì)師們一直被有限數(shù)量的字體所束縛。

網(wǎng)頁(yè)設(shè)計(jì)的潛力看起來(lái)正在一天天地增長(zhǎng)。HTML5，CSS3和Javascript這樣的技術(shù)應(yīng)用帶來(lái)了很多令人驚喜而有創(chuàng)造性的網(wǎng)站設(shè)計(jì)。從純文本的瀏覽器時(shí)代以來(lái)，網(wǎng)頁(yè)已經(jīng)走過(guò)一段很長(zhǎng)的路。盡管如此，網(wǎng)頁(yè)設(shè)計(jì)中仍然有一個(gè)領(lǐng)域相對(duì)而言依然停滯不前。

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

為了擺脫這種限制，用字體來(lái)表達(dá)創(chuàng)意，設(shè)計(jì)師使用的傳統(tǒng)方法是把文字合并到圖片中——然而這種方法有許多的缺點(diǎn)。增加了很多可用性問(wèn)題，并隨著加載時(shí)間增加，網(wǎng)站的性能也相應(yīng)地受到負(fù)面影響。

這篇文章會(huì)探討一些在網(wǎng)頁(yè)中不用圖片加入非標(biāo)準(zhǔn)字體的方法。我們會(huì)看到每個(gè)方法的優(yōu)點(diǎn)和缺點(diǎn)，字體的使用授權(quán)，以及這項(xiàng)技術(shù)對(duì)網(wǎng)頁(yè)設(shè)計(jì)師到底意味著什么。

Cufón

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

Cufón在主頁(yè)上提供了一個(gè)字體轉(zhuǎn)換工具，它能將你選擇的字體轉(zhuǎn)換為SVG，并為你創(chuàng)建一個(gè)Javascript文件，你需要在html中引用它。Nettuts+的Jeffrey Way曾寫過(guò)一篇關(guān)于如何在你的網(wǎng)頁(yè)中集成Cufón的step-by-step優(yōu)秀教程。

Cufón對(duì)很多網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)很流行的選擇，因?yàn)樗�有許多優(yōu)點(diǎn)，相對(duì)來(lái)說(shuō)幾乎沒(méi)什么缺點(diǎn)。它不依賴其它腳本語(yǔ)言或插件，這意味著它對(duì)相當(dāng)大部分受眾都是可用的，并且被近期所有的主流瀏覽器所支持，包括IE9。你還可以直接對(duì)Cufón替換的文字應(yīng)用CSS樣式，包括比較新的CSS3特性，例如漸變�？紤]到速度，它比sFIR要快得多，而且沒(méi)那么密集，但它仍然不應(yīng)該被用在主體的大段文字上。

優(yōu)點(diǎn)：

不同的瀏覽器間很不錯(cuò)的兼容性

可以在你的字體中的只包含字符里的特定集合（ABC，123，等等），以便于控制文件體積。

CSS字體樣式在所有的瀏覽器中都能保持（顏色、尺寸、陰影??）

缺點(diǎn)：

文字無(wú)法選擇

表現(xiàn)：最好在頂部、標(biāo)題和副標(biāo)題中使用

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

標(biāo)簽： 網(wǎng)頁(yè)設(shè)計(jì)師 網(wǎng)頁(yè)字體 字體替換 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。