入門(mén)：字體替換術(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è)用戶(hù)正確顯示，設(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)單、有效得難以置信的辦法，它的功能不需要依賴(lài)服務(wù)端的語(yǔ)言或插件。Cufón只需要幾行Javascript代碼就能工作，它使用HTML5的畫(huà)布特性渲染字體，并為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曾寫(xiě)過(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)樗性S多優(yōu)點(diǎn)，相對(duì)來(lái)說(shuō)幾乎沒(méi)什么缺點(diǎn)。它不依賴(lài)其它腳本語(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)等）需要一些額外的工作。
出處：Seemeloo西米露
責(zé)任編輯：bluehearts
上一頁(yè) 網(wǎng)頁(yè)設(shè)計(jì)師的字體替換方法指南 [1] 下一頁(yè) 網(wǎng)頁(yè)設(shè)計(jì)師的字體替換方法指南 [3]
|
第 1 頁(yè) 
第 2 頁(yè) 網(wǎng)頁(yè)設(shè)計(jì)師的字體替換方法指南 [2]
