網(wǎng)頁(yè)設(shè)計(jì)師的字體替換方法指南

0 評(píng)論 5646 瀏覽 1 收藏 28 分鐘

寫(xiě)在這篇文章之前:中文網(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)的字體,拿不到多少錢(qián),這又降低了制作好字體的積極性。

中文網(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è)字符方寸筆畫(huà)之間的蘊(yùn)含的意味,并適當(dāng)?shù)赜迷谠O(shè)計(jì)中,這是我們這些相對(duì)落伍的中文世界設(shè)計(jì)師要艱難完成的任務(wù)。

============翻譯開(kāi)始的分割線=============

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

受夠了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)始使用它們。

入門(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è)用戶正確顯示,設(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的畫(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)。它不依賴其它腳本語(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)等)需要一些額外的工作。

@font-face

“@font-face is essentially the ultimate solution for fonts on the web.”
@font-face基本上是網(wǎng)頁(yè)中字體的最終解決方案。

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

@font-face在網(wǎng)頁(yè)上實(shí)現(xiàn)自定義字體,使用的技術(shù)無(wú)非是CSS——這意味著不再依賴于Flash,PHP甚至Javascript。當(dāng)使用@font-face時(shí),渲染的是真正的字體,而不是向量對(duì)象或圖片,因此文本可以被選擇、放大,使用CSS修改樣式。

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

關(guān)于@font-face,唯一還要提出的小問(wèn)題是,因?yàn)樗尸F(xiàn)的是真正的字體,不同的瀏覽器和操作系統(tǒng)的渲染效果會(huì)有細(xì)微的區(qū)別。一些網(wǎng)頁(yè)字體服務(wù)會(huì)使用字體微調(diào)來(lái)協(xié)助修正這些細(xì)微的差異,字體微調(diào)會(huì)在瀏覽器中平滑字體的輪廓,創(chuàng)造出更好看的字體。我們會(huì)更深入地探討這些服務(wù)。

如果你需要更多關(guān)于如何在網(wǎng)站中實(shí)現(xiàn)@font-face的信息,Jeffrey Way又一次提供了一篇非常有用的教程。

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

  • 保持了可用性——這意味著它能優(yōu)雅降級(jí)
  • 支持Unicode
  • 支持CSS字體樣式

缺點(diǎn):

  • 一些字體文件下載起來(lái)比較大
  • 不同瀏覽器之間沒(méi)有統(tǒng)一的格式
  • 不允許發(fā)布(據(jù)我們所知)——在確認(rèn)你的發(fā)布許可之前,不能在模板或主題中使用。

接下來(lái)的解決方案依賴于@font-face來(lái)實(shí)現(xiàn)——每一個(gè)多少都算是一種服務(wù)——這意味著:它們都使用同樣的基本技術(shù),但是它們提供不同的字體庫(kù),授權(quán)選項(xiàng),以及支付計(jì)劃;是的,大部分是需要付費(fèi)才能使用,但這可能就是所有網(wǎng)絡(luò)字體的未來(lái)。


Font Squirrel @font-face Kits

Font Squirrel或許是現(xiàn)在最流行的文字替換資源。Font Squirrel讓你忘掉所有對(duì)字體授權(quán)可能有的擔(dān)心,因?yàn)樗峁┑乃凶煮w在商業(yè)上都是免費(fèi)的。這個(gè)網(wǎng)站有數(shù)百種字體供選擇,從sans-serif到novelty風(fēng)格的字體都有。

就像之前提到的,為了保證@font-face在所有瀏覽器中都能工作,你需要幾種不同的字體格式,對(duì)此,F(xiàn)ont Squirrel也有解決方案。網(wǎng)站提供了@font-face套件,其中有你需要的所有字體格式,以及HTML和CSS。如果你找不到你想用字體的@font-face套件,他們同樣免費(fèi)提供了生成器,能將你的字體轉(zhuǎn)換為所需的多種格式。使用生成器時(shí),你需要保證你擁有使用這個(gè)字體的正確授權(quán)。

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

  • 使用@font-face,但實(shí)現(xiàn)起來(lái)容易得多
  • 他們處理所有的授權(quán)相關(guān)的事項(xiàng)
  • 數(shù)百種字體可供挑選
  • 包含多種格式(TrueType, EOT, WOFF, SVG, Cufon等等)
  • 如果他們沒(méi)有你想要的字體,你甚至可以生成你自己的套件

缺點(diǎn):

  • 和@font-face一樣,不過(guò)通常來(lái)說(shuō),這是一個(gè)非常棒的解決方案

Google Fonts API

Google Fonts API的使用結(jié)合了他們自己非常獨(dú)有的字體目錄,目錄中的所有的字體都是開(kāi)源的,所有人都能使用。這個(gè)目錄一直都在擴(kuò)展和增長(zhǎng),目前已經(jīng)包含了超過(guò)200個(gè)例子。

要把目錄中的字體用在你的網(wǎng)站上,真是簡(jiǎn)單得不能再簡(jiǎn)單了。你只需要選擇你想用的字體,選擇想要的字體變體,Google會(huì)向你提供一行你需要用的Javascript代碼。修改css,列出這個(gè)字體,你就準(zhǔn)備好了!這真的非常簡(jiǎn)單。

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

  • 開(kāi)源授權(quán)意味著這些都是免費(fèi)使用的
  • 字體放在Google的服務(wù)器上,所以你的字體可能已經(jīng)在瀏覽器的緩存中

缺點(diǎn):

  • 呃……

Typekit

Typekit是第一個(gè)提供預(yù)訂網(wǎng)頁(yè)字體服務(wù)的網(wǎng)站,并仍然非常流行。Typekit以及其他類似的服務(wù)網(wǎng)站解決字體授權(quán)的方法是:繳納年費(fèi),會(huì)員就能訪問(wèn)大量的自定義字體。這種方法允許字體的制造商為他們努力的工作收到一些回報(bào),并防止了字體的盜版,因?yàn)樗械淖煮w都放在Typekit的受保護(hù)的服務(wù)器上。用戶不用把字體放在他們自己的網(wǎng)站空間里,只需要簡(jiǎn)單的鏈接即可。

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

Typekit的另一個(gè)優(yōu)點(diǎn)是它能微調(diào)字體,幫助控制不同瀏覽器處理文本和字體的差異。

Typekit提供了不同的價(jià)格包以適應(yīng)不同的需求。免費(fèi)的包提供Trial Library中的兩個(gè)字體,只能在一個(gè)網(wǎng)站上使用。這個(gè)網(wǎng)站每月最多允許25,000次頁(yè)面瀏覽(Page View),并且你必須在網(wǎng)站中顯示Typekit的標(biāo)志,鏈接到你使用字體的信息。而相應(yīng)的,規(guī)模最大的是性能包(Perfomance package),它提供所有字體的使用權(quán)限,不限網(wǎng)站數(shù)量和瀏覽量。所有這些的年費(fèi)是99鎊。

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

  • 字體選擇很多
  • 字體放在Typekit的服務(wù)器上

缺點(diǎn):

  • 每年都需要交錢(qián)
  • 抗噪不是很完美,一些字體可能在一些瀏覽器和操作系統(tǒng)中看起來(lái)有鋸齒,沒(méi)有抗噪

Fonts.com Web Fonts

流行的字體資源font.com也開(kāi)啟了一項(xiàng)專門(mén)的網(wǎng)頁(yè)字體服務(wù),他們自稱提供了超過(guò)8,000種字體由你在網(wǎng)站上使用。和Typekit類似,它提供的是基于的預(yù)訂的服務(wù),但它的價(jià)格是月度的。和Typekit相比,它的價(jià)錢(qián)并不貴,但字體的限制要少得多。免費(fèi)包相比之下相當(dāng)?shù)挠押谩獰o(wú)限制地使用8,000種字體,不限網(wǎng)站數(shù)量。專業(yè)包允許你下載50種字體到你的電腦中,并在設(shè)計(jì)中使用這些字體。

Fonts.com網(wǎng)頁(yè)字體自夸他們的字體集中有一些真的非常棒的字體——例如Helvetica, Univers和Franklin Gothic。

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

  • 非常多可選擇的字體和樣式
  • 字體放在Typekit的服務(wù)器上
  • 獨(dú)有的Helvetica?、 Frutiger?、 Univers? 和其他有名的字體

缺點(diǎn):

  • 如果他們的免費(fèi)服務(wù)無(wú)法滿足你,需要交年費(fèi)
  • 他們的字體庫(kù)其實(shí)相當(dāng)?shù)拇螅苁褂玫暮苡邢?/li>

Fontdeck

曾為一些世界上最大的企業(yè)服務(wù)的著名網(wǎng)頁(yè)設(shè)計(jì)公司Clear Left與OmniTI合作,發(fā)布了Font Deck。Font Deck是另一個(gè)基于預(yù)訂的服務(wù)商,但你只需要為使用的每個(gè)單獨(dú)的字體付年費(fèi),這對(duì)那些只想在個(gè)人博客中使用一到兩個(gè)字體的人來(lái)說(shuō)很完美。

字體的價(jià)格最低為單個(gè)域名2.5美元/年,不限頁(yè)面瀏覽量。全部的字體都可以無(wú)限期免費(fèi)試用,但只有20個(gè)獨(dú)立IP可以瀏覽。這個(gè)免費(fèi)包有助于彌補(bǔ)無(wú)法下載字體到本地的缺點(diǎn),你在設(shè)計(jì)階段就能使用它們。因?yàn)镕ont Deck相對(duì)來(lái)說(shuō)很新,目前字體的選擇很少。

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

  • 只需要為你需要的付費(fèi)
  • 在網(wǎng)站上預(yù)覽字體是免費(fèi)的
  • 語(yǔ)言支持

缺點(diǎn):

  • 它依然是需要付費(fèi)的
  • 他們的字體庫(kù)其實(shí)相當(dāng)?shù)拇螅苁褂玫暮苡邢?/li>

Font Spring

Font Spring采用了和預(yù)訂服務(wù)有些許區(qū)別的方法,它回到了傳統(tǒng)的購(gòu)買字體的路子上。字體是獨(dú)立購(gòu)買的,你需要下載他們,并放在自己的服務(wù)器上。Font Spring認(rèn)為提供的字體中99.9%都可以通過(guò)@font-face方式使用。

每個(gè)獨(dú)立的字體的價(jià)格都不一樣,要用@font-face方式使用字體,你需要額外支付費(fèi)用。@font-face授權(quán)包括桌面OpenType版本和在web上需要的其他格式。

用這個(gè)方法有很多的優(yōu)點(diǎn),如果你真的只心儀一種字體,和預(yù)訂服務(wù)相比這可能會(huì)更便宜。你可以在任意多的域名中使用,因?yàn)槟隳苤苯涌刂扑鼈儯⑶翼?yè)面瀏覽量也沒(méi)有限制。

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

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

  • 像Font Squirrel一樣,它為你處理了授權(quán)相關(guān)事項(xiàng)
  • 又一個(gè)很棒的字體庫(kù),有很多不同的字體制造商

缺點(diǎn):

  • 每一個(gè)字體都需要付費(fèi),這可能需要很多錢(qián)
  • 你需要把字體放在自己服務(wù)器上

其他字體替換解決方案

這些只是可用的字體服務(wù)中的一部分。還有很多提供服務(wù)的網(wǎng)站,例如Typotheque和Webtype。他們都各有優(yōu)勢(shì)和劣勢(shì),你應(yīng)該基于個(gè)人的需要做出選擇。一些人可能看中預(yù)訂服務(wù)的簡(jiǎn)便,而另一些人可能不喜歡把網(wǎng)站的一部分控制權(quán)交給第三方。如果你是后一種情況,你最好使用像Font Squirrel這樣的,下載你自己的字體,并放自己的服務(wù)器上。

接下來(lái)的兩個(gè)(sIFR和FLIR)通常被認(rèn)為是“守舊派”,因?yàn)樗鼈兌加泻苊黠@的問(wèn)題,但是它們是值得討論和了解的。

sIFR

sIFR已經(jīng)出現(xiàn)了好一段時(shí)間了。當(dāng)我們確實(shí)除了圖片沒(méi)有其他選擇時(shí),它第一個(gè)出現(xiàn)了,提供了一個(gè)很有效的引入非標(biāo)準(zhǔn)字體的方法。sFIR(即Scalable Inman Flash Replacement)結(jié)合使用了Flash和Javascript來(lái)將頁(yè)面上的文本修改為Flash元素。sIFR有許多優(yōu)點(diǎn),例如文本保持了對(duì)屏幕讀者的可用性,也可以被選擇。

然而名字中的“scalable”可能會(huì)造成一些混淆。sIFR的可放大的意義是,F(xiàn)lash元素放大至原有瀏覽器文本的尺寸——這允許它擁有最大的尺寸可能性,能以任何給定的尺寸顯示文本。然而,當(dāng)用戶調(diào)整頁(yè)面的文本尺寸時(shí),任何已經(jīng)被Flash元素替換的文本大小是無(wú)法改變的。這顯然會(huì)造成一些可用性問(wèn)題。sIFR同樣需要用戶的電腦啟用Flash和Javascript才能起作用。

sFIR的創(chuàng)造者之一,Mike Davidson同樣認(rèn)識(shí)到這項(xiàng)技術(shù)的局限性。Mike曾公開(kāi)表示,sFIR不應(yīng)該被用于大段的文本,因?yàn)樗鼤?huì)對(duì)網(wǎng)站的性能有顯著的影響。Mike同樣認(rèn)識(shí)到他的技術(shù)并不是網(wǎng)頁(yè)排印的最終解決方案,他只是簡(jiǎn)單的引用了這個(gè)詞“權(quán)宜之計(jì)”。

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

  • 沒(méi)什么大的優(yōu)點(diǎn)……除了它是出現(xiàn)的第一個(gè)字體替換方法。

缺點(diǎn):

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

FLIR

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

不幸的是,F(xiàn)LIR除了使用簡(jiǎn)便和節(jié)省時(shí)間以外,相比傳統(tǒng)的將文本存成圖片,它并沒(méi)有提供更多改進(jìn)。最終結(jié)果是文本依然以圖片的形式渲染,文字無(wú)法被選擇或放大。
優(yōu)點(diǎn):

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

缺點(diǎn):

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

字體授權(quán)和合法性

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

當(dāng)使用上述的某種字體替換方法時(shí),你實(shí)際上在你的網(wǎng)站植入了一個(gè)字體,或者鏈接到一個(gè)上傳到你服務(wù)器的字體。即使是免費(fèi)的字體授權(quán),這也是不允許多人使用的。許多字體創(chuàng)造者和制造商都不允許這樣的原因是,它會(huì)讓網(wǎng)站的用戶直接訪問(wèn)字體文件,他們開(kāi)始擔(dān)心他們的字體可能被下載并非法傳播。這個(gè)問(wèn)題讓很多字體制造者不允許他們的字體通過(guò)@font-face使用。

因此,當(dāng)使用上述的方法時(shí),你絕對(duì)要確認(rèn)字體的授權(quán)是允許的,這非常的重要。

還好,這個(gè)問(wèn)題沒(méi)有完全阻礙字體替換方法的發(fā)展,還有很多可用的資源允許你在網(wǎng)站上使用自定義的字體。

最后的思考:這對(duì)設(shè)計(jì)師們意味著什么

“Perfection is not worth waiting for, if you do, you risk missing out on exciting new opportunities”
完美不值得等待,如果你這么做了,你在冒險(xiǎn)錯(cuò)過(guò)那些令人興奮的新機(jī)會(huì)。

上面我們討論了很多,對(duì)于想在站點(diǎn)設(shè)計(jì)中使用自定義字體的人來(lái)說(shuō),很顯然有很多種選擇。好消息是,所有的方法現(xiàn)在都是可用的。而壞消息是,沒(méi)有一種方法是完美的,每一種都有他們自己的優(yōu)點(diǎn)和缺點(diǎn),這是實(shí)話。@font-face顯然是最有希望的,但可能還要過(guò)好多年,它才能算得上絕對(duì)沒(méi)問(wèn)題。事實(shí)是,雖然在網(wǎng)頁(yè)設(shè)計(jì)的世界里,情況很難說(shuō)完美,但是還有很多折中方案,而這些方案需要使用新的技術(shù)。完美并不值得等待,如果你這么做了,你在冒險(xiǎn)錯(cuò)過(guò)那些令人興奮的新機(jī)會(huì)。

這真的是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)令人興奮的時(shí)代,網(wǎng)頁(yè)的排印似乎正在得到更多的欣賞和理解。字體替換方法為創(chuàng)造有創(chuàng)意的新設(shè)計(jì)提供了很棒的機(jī)會(huì),并且我相信,關(guān)鍵在于不要濫用這項(xiàng)技術(shù)。當(dāng)情況出現(xiàn)問(wèn)題時(shí)總是提供降級(jí)的方案,聰明地使用每一種方法(不要像這樣改掉你網(wǎng)站所有的文本)。多花一些時(shí)間,欣賞和學(xué)習(xí)偉大的字體,網(wǎng)頁(yè)會(huì)是一個(gè)更好的使用字體的地方。

來(lái)源:http://seemeloo.com/css/a-web-designers-guide-to-font-replacement-methods/

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!