關於web字體的那些事兒

 　　我曾與一位視覺設計師合作共同開發一款web應用。他提交給我的設計稿看起來非常帶感，於是我根據他的設計稿，用HTML和CSS將web應用寫了出來。當我以為一切都已完成，並且火急火燎地將產品給他看的時候，知道他說啥了麼?

　　“你全做錯了。”

　　的確。我並沒有根據他的模型來使用字體，為此他專門把我叫出來並告訴我這是一個非常大的錯誤。我該如何彌補呢?

　　“我不知道。但是目前它是最大的問題，毫無疑問。”

　　說起來，在過去的很長一段時間裡，我都同不同的網頁設計師一起合作開發各種不同的網站，這使得我逐漸開始關注網頁設計中的很多細小但重要的細節了，比如，字體。

　　在此可以簡單介紹一點背景知識。目前多數的網站都是基於HTML和CSS來開發的，如果你毫無網站開發經驗，也許你有必要找個HTML&CSS的介紹視頻學習一下，比如1小時創建一個體驗不錯的個人網站頁面之類的教程。

　　以下，是我的視覺設計師教授給我的字體知識。

　　字體規格

　　改變某寫字體樣式最簡單的方式，是改變CSS的Font-family屬性，然後，浏覽器會直接讀取用戶電腦上的字體，想必每個網站開發者都明白這件事情。一般而言，一共有12種常見的網站安全字體，除開相對特殊的Comic Sans，還有11款字體可以供你在絕大多數類型的網站上隨意使用。

　　如果你的視線僅僅盯著這十來個字體就未免太局限了。如果你足夠敏銳，你會有意識地調整字體的粗線(light、normal、bold)和字間距，追求更好的效果。舉個例子，當你在導航欄中使用特粗的字體，緊湊的字體間距，會讓你的網站看起來更加專業。相反，如果你使用的是極細的字體，網頁會給人一種非常銳利、清晰的感覺。

　　另一個使用字體的竅門，就是在CSS中為字體添加字體陰影屬性。

　　以下的案例中，字體家族被設定為Helvetica，並且字體粗細被設定為極細。

　　這一字體的案例源自於我們的web應用Nomster。

　　字體棧

　　當你在指定要用什麼字體的時候，你可以根據重要程度來設定一個順序，越靠前的優先級越高。當設備中沒有排名考前的字體的時候，那麼系統會自動調用排名靠後的字體。這也就是為什麼windows和Mac內置字體不盡相同，但是最終都能調用合適的字體而正常顯示網頁內容的原因所在。對於這個字體棧的設定，以下的工具/網站應該能幫到你：

　　CSS Tricks – Font Stacks：這是一個擁有8個不同字體的字體棧，直接從CSS Tricks抓取這個字體棧，你的網站字體效果肯定不會像1995之前的網站那麼殘廢。

　　CSSFontStack.com：一個專業提供各種不同字體棧的網站，超過40種不同字體棧供你選擇~

　　當然，如果你通過谷歌和百度來搜索應該可以發現更多的字體棧。

　　以下的使用案例同樣來自我們的Web應用Nomster。它所使用的字體棧也是我們最喜歡的，因為它確實提高了網站的可讀性。

　　加載特定字體

　　在web應用中使用特定字體來顯示文本，是一件可行性很高的事情。你不必找一個“看起來很像”的字體來湊合，因為以下的方法可以幫你直接用你喜歡的字體：

　　字體托管服務

　　將一個普通字體加載到網站上，確實需要一點技巧。字體托管服務可以替你做到這一點，不過有的是免費的，有的是收費的。

　　Google web Fonts：谷歌的字體服務還是非常靠譜的，整合了許多優質的web字體供你調用到網站中去。按照谷歌官方的指示，你可以輕松地在你的web應用中調用這些字體。

　　當你想在網站中使用Garamond這個字體的時候，你如果使用字體棧來調用的話，可能會因為浏覽器差異而無法正常使用，也可能因為本地字體而顯示不正常，而使用谷歌字體中的“EB Garamond”則不存在這樣的問題，它不會調用本地字庫，而且大家電腦裡面顯示也會完全一樣。

　　谷歌字體服務是免費而易用的，並且會讓不同的系統不同的浏覽器都保持一致的體驗，那為什麼會有人考慮其他的方案呢?原因很簡單。谷歌字體平台所收錄的字體多數是相對更開放甚至是直接開源的字體，但是有很多殺手級字體的開發商並不願意這麼做。作為商品出售字體可以給這些開發商帶來更大的利益，這使得你無法在谷歌字體平台上找到它們。當然，這個問題也是可以解決的。

　　TypeKit ：這個字體網站也是耳熟能詳的大站。其中囊括了很多品質優秀的好字體，但是相信我，你看了會後悔的。為什麼這麼說?那些看起來優秀的字體並不便宜!基礎的服務需要每年上交25美元，而高級版的每年需要交100美元!當然，如果不差錢的話，選擇TypeKit也不錯~

　　所以，最好不要告訴與你合作的設計師，否則他們會逼著你整套整套得買字體的!(突然意識到這篇文章的讀者會是設計師……)

　　那麼以上三種方案就是全部的解決方案了?別傻了，當然不止。谷歌字體是最著名的免費字體服務商，而TypeKit則是收費字體服務商中最流行的，你要用心找還有大把的字體托管服務商可供選擇。

　　自托管字體

　　這是一種相對棘手的解決方案。因為這種方法的關鍵完全不在技術上，而是你得深入理解字體的授權和相關法律細節。

　　當我們直接從用戶的機器上調用字體，或者使用托管字體的時候，我們完全不用考慮太多，幾行CSS代碼會解決所有的問題。但是，當我們要自己托管字體的時候，就需要明白使用字體的權限和相應的授權細節了。

　　比較高端的玩兒法是你在寫代碼的時候，告訴浏覽器下載字體，並且告訴浏覽器將去什麼地方查找字體文件(或者多個版本的字體文件)，然後告訴浏覽器這些字體的名字分別是什麼。同時也需要注意，這些字體的類型。常見的字體格式是EOT、OTF、WOFF、TTF、SVG等。不同浏覽器慣於處理的字體格式可能不一樣，所以最好你得准備好多種不同的字體供不同浏覽器下載。

　　所以，首先你要將你准備好的字體文件轉化成多種不同格式的字體，比如，你准備好一個.ttf格式的字體，那麼你需要將它轉化成.woff、.otf、.svg等格式的字體，然後你就可以設定下載文件的位置、調用字體的相關信息了。

　　令事情變得棘手的地方就在此了。考慮到你提供給了世界上每個人從你網站上下載字體的機會，那麼當你將字體上傳到服務器的那一刻開始，人們就可以肆無忌憚地將字體下載到他們的電腦上，分享給朋友甚至用到他們自己的網站上。這就是為什麼很多字體開發商不想讓他們的字體輕易用在網站上。

　　因此當你需要下載一個用在自己的網站上的字體之時，你需要尋找授權可以用於網絡且免費的字體(當然，不是用於桌面的那種)。

　　FontSquirrel：這是一個我特喜歡的免費字體網站，他們的首頁上有一些的超高質量免費字體，並且每個字體的字體許可都已經明確地標注了出來。

　　在FountSquirrel上還有另外一個超贊的工具，那就是WebFont生成器。你可以將單個字體文件上傳到生成器中，它會將其自動轉化成你需要的其他字體，並且同時生成相應的CSS代碼，可以供你直接插入到網站代碼中。只要格式允許，WebFont都能轉化，並不規定字體來源。

　　除了免費字體，FontSquirrel還賣有大量的字體是收費的。

　　以下便是來自FontSquirrel的字體“Pacifico”在我們的Nomster上應用的案例：

　　MyFont.com同樣會免費提供少量字體(但是其他字體會收費)的字體網站。當你在這個網站中搜索自己要的字體的時候，會發現其中絕大多數的字體都是需要你付費的，但是其中有些字體家族中特定粗細的字體是免費提供的，一定要仔細篩選。如果你人品好，真的能淘到好字體。

　　最後，關於字體還有三件事情是需要了解的：

　　1、不同的字體會賦予網站截然不同的感覺，把握好字體的細節就能掌控好網站的感覺;

　　2、將字體加載到web應用中的方法有一大把，仔細篩選一種符合自己的;

　　3、營造專業和炫酷的呈現效果固然重要，但是網站的最終目的還是傳達信息，讓人閱讀的。所以在調整效果完之後，不妨猴退一步仔細審視一下，用戶能否讀到所有你寫上去的文字。