@陳子木 我曾與一位視覺設(shè)計師合作共同開發(fā)一款web應(yīng)用。他提交給我的設(shè)計稿看起來非常帶感,于是我根據(jù)他的設(shè)計稿,用HTML和CSS將web應(yīng)用寫了出來。當我以為一切都已完成,并且火急火燎地將產(chǎn)品給他看的時候,知道他說啥了么?
的確。我并沒有根據(jù)他的模型來使用字體,為此他專門把我叫出來并告訴我這是一個非常大的錯誤。我該如何彌補呢?
說起來,在過去的很長一段時間里,我都同不同的網(wǎng)頁設(shè)計師一起合作開發(fā)各種不同的網(wǎng)站,這使得我逐漸開始關(guān)注網(wǎng)頁設(shè)計中的很多細小但重要的細節(jié)了,比如,字體。 在此可以簡單介紹一點背景知識。目前多數(shù)的網(wǎng)站都是基于HTML和CSS來開發(fā)的,如果你毫無網(wǎng)站開發(fā)經(jīng)驗,也許你有必要找個HTML&CSS的介紹視頻學(xué)習一下,比如1小時創(chuàng)建一個體驗不錯的個人網(wǎng)站頁面之類的教程。 以下,是我的視覺設(shè)計師教授給我的字體知識。 字體規(guī)格 改變某寫字體樣式最簡單的方式,是改變CSS的Font-family屬性,然后,瀏覽器會直接讀取用戶電腦上的字體,想必每個網(wǎng)站開發(fā)者都明白這件事情。一般而言,一共有12種常見的網(wǎng)站安全字體,除開相對特殊的Comic Sans,還有11款字體可以供你在絕大多數(shù)類型的網(wǎng)站上隨意使用。 如果你的視線僅僅盯著這十來個字體就未免太局限了。如果你足夠敏銳,你會有意識地調(diào)整字體的粗線(light、normal、bold)和字間距,追求更好的效果。舉個例子,當你在導(dǎo)航欄中使用特粗的字體,緊湊的字體間距,會讓你的網(wǎng)站看起來更加專業(yè)。相反,如果你使用的是極細的字體,網(wǎng)頁會給人一種非常銳利、清晰的感覺。 另一個使用字體的竅門,就是在CSS中為字體添加字體陰影屬性。 以下的案例中,字體家族被設(shè)定為Helvetica,并且字體粗細被設(shè)定為極細。 這一字體的案例源自于我們的web應(yīng)用Nomster。 字體棧 當你在指定要用什么字體的時候,你可以根據(jù)重要程度來設(shè)定一個順序,越靠前的優(yōu)先級越高。當設(shè)備中沒有排名考前的字體的時候,那么系統(tǒng)會自動調(diào)用排名靠后的字體。這也就是為什么windows和Mac內(nèi)置字體不盡相同,但是最終都能調(diào)用合適的字體而正常顯示網(wǎng)頁內(nèi)容的原因所在。對于這個字體棧的設(shè)定,以下的工具/網(wǎng)站應(yīng)該能幫到你: CSS Tricks – Font Stacks:這是一個擁有8個不同字體的字體棧,直接從CSS Tricks抓取這個字體棧,你的網(wǎng)站字體效果肯定不會像1995之前的網(wǎng)站那么殘廢。 CSSFontStack.com:一個專業(yè)提供各種不同字體棧的網(wǎng)站,超過40種不同字體棧供你選擇~ 當然,如果你通過谷歌和百度來搜索應(yīng)該可以發(fā)現(xiàn)更多的字體棧。 以下的使用案例同樣來自我們的Web應(yīng)用Nomster。它所使用的字體棧也是我們最喜歡的,因為它確實提高了網(wǎng)站的可讀性。 加載特定字體 在web應(yīng)用中使用特定字體來顯示文本,是一件可行性很高的事情。你不必找一個“看起來很像”的字體來湊合,因為以下的方法可以幫你直接用你喜歡的字體: 字體托管服務(wù) 將一個普通字體加載到網(wǎng)站上,確實需要一點技巧。字體托管服務(wù)可以替你做到這一點,不過有的是免費的,有的是收費的。 Google web Fonts:谷歌的字體服務(wù)還是非??孔V的,整合了許多優(yōu)質(zhì)的web字體供你調(diào)用到網(wǎng)站中去。按照谷歌官方的指示,你可以輕松地在你的web應(yīng)用中調(diào)用這些字體。 當你想在網(wǎng)站中使用Garamond這個字體的時候,你如果使用字體棧來調(diào)用的話,可能會因為瀏覽器差異而無法正常使用,也可能因為本地字體而顯示不正常,而使用谷歌字體中的“EB Garamond”則不存在這樣的問題,它不會調(diào)用本地字庫,而且大家電腦里面顯示也會完全一樣。 谷歌字體服務(wù)是免費而易用的,并且會讓不同的系統(tǒng)不同的瀏覽器都保持一致的體驗,那為什么會有人考慮其他的方案呢?原因很簡單。谷歌字體平臺所收錄的字體多數(shù)是相對更開放甚至是直接開源的字體,但是有很多殺手級字體的開發(fā)商并不愿意這么做。作為商品出售字體可以給這些開發(fā)商帶來更大的利益,這使得你無法在谷歌字體平臺上找到它們。當然,這個問題也是可以解決的。 TypeKit :這個字體網(wǎng)站也是耳熟能詳?shù)拇笳?。其中囊括了很多品質(zhì)優(yōu)秀的好字體,但是相信我,你看了會后悔的。為什么這么說?那些看起來優(yōu)秀的字體并不便宜!基礎(chǔ)的服務(wù)需要每年上交25美元,而高級版的每年需要交100美元!當然,如果不差錢的話,選擇TypeKit也不錯~ 所以,最好不要告訴與你合作的設(shè)計師,否則他們會逼著你整套整套得買字體的?。ㄍ蝗灰庾R到這篇文章的讀者會是設(shè)計師……) 那么以上三種方案就是全部的解決方案了?別傻了,當然不止。谷歌字體是最著名的免費字體服務(wù)商,而TypeKit則是收費字體服務(wù)商中最流行的,你要用心找還有大把的字體托管服務(wù)商可供選擇。 自托管字體 這是一種相對棘手的解決方案。因為這種方法的關(guān)鍵完全不在技術(shù)上,而是你得深入理解字體的授權(quán)和相關(guān)法律細節(jié)。 當我們直接從用戶的機器上調(diào)用字體,或者使用托管字體的時候,我們完全不用考慮太多,幾行CSS代碼會解決所有的問題。但是,當我們要自己托管字體的時候,就需要明白使用字體的權(quán)限和相應(yīng)的授權(quán)細節(jié)了。 比較高端的玩兒法是你在寫代碼的時候,告訴瀏覽器下載字體,并且告訴瀏覽器將去什么地方查找字體文件(或者多個版本的字體文件),然后告訴瀏覽器這些字體的名字分別是什么。同時也需要注意,這些字體的類型。常見的字體格式是EOT、OTF、WOFF、TTF、SVG等。不同瀏覽器慣于處理的字體格式可能不一樣,所以最好你得準備好多種不同的字體供不同瀏覽器下載。 所以,首先你要將你準備好的字體文件轉(zhuǎn)化成多種不同格式的字體,比如,你準備好一個.ttf格式的字體,那么你需要將它轉(zhuǎn)化成.woff、.otf、.svg等格式的字體,然后你就可以設(shè)定下載文件的位置、調(diào)用字體的相關(guān)信息了。 令事情變得棘手的地方就在此了??紤]到你提供給了世界上每個人從你網(wǎng)站上下載字體的機會,那么當你將字體上傳到服務(wù)器的那一刻開始,人們就可以肆無忌憚地將字體下載到他們的電腦上,分享給朋友甚至用到他們自己的網(wǎng)站上。這就是為什么很多字體開發(fā)商不想讓他們的字體輕易用在網(wǎng)站上。 因此當你需要下載一個用在自己的網(wǎng)站上的字體之時,你需要尋找授權(quán)可以用于網(wǎng)絡(luò)且免費的字體(當然,不是用于桌面的那種)。 FontSquirrel:這是一個我特喜歡的免費字體網(wǎng)站,他們的首頁上有一些的超高質(zhì)量免費字體,并且每個字體的字體許可都已經(jīng)明確地標注了出來。 在FountSquirrel上還有另外一個超贊的工具,那就是WebFont生成器。你可以將單個字體文件上傳到生成器中,它會將其自動轉(zhuǎn)化成你需要的其他字體,并且同時生成相應(yīng)的CSS代碼,可以供你直接插入到網(wǎng)站代碼中。只要格式允許,WebFont都能轉(zhuǎn)化,并不規(guī)定字體來源。 除了免費字體,F(xiàn)ontSquirrel還賣有大量的字體是收費的。 以下便是來自FontSquirrel的字體“Pacifico”在我們的Nomster上應(yīng)用的案例: MyFont.com同樣會免費提供少量字體(但是其他字體會收費)的字體網(wǎng)站。當你在這個網(wǎng)站中搜索自己要的字體的時候,會發(fā)現(xiàn)其中絕大多數(shù)的字體都是需要你付費的,但是其中有些字體家族中特定粗細的字體是免費提供的,一定要仔細篩選。如果你人品好,真的能淘到好字體。 最后,關(guān)于字體還有三件事情是需要了解的:
|
|