優秀的網頁意味着設計人員對頁面的精雕細琢，在這一過程中，我們既要接受規則，也要樂于發現并掌握新的工具，努力讓生活變得更簡單，設計更優秀。
其實網頁的字型和真實的字型沒有本質上的差別，是以我很不贊同”網頁字型”和”真實的字型”不同這一說法，隻能說它們的每個應用比如說網頁字型、鉛字、海報字型以及電影字型都有自己的特色和限制，但是歸根究底，它們是同根生。
本文主要是告訴大家該怎麼挑選網頁的字型，我們收集了一些好的方法，關于怎麼選擇字型類型，怎樣設計字型的細節，研究浏覽器特性等等，這些都是網頁設計程序中的一部分，快來看看吧~
選擇合适的字型類型
在選擇字型類型的時候我們很猶豫，因為要考慮的因素太多了，包括網頁的用途，網頁側重以及網頁類型。但是，作為一個設計師，當然要從”設計”的角度去看問題。現實很殘酷，如果我們選錯了類型太陽明天還是會照常升起，但是你要記住：選擇字型類型這一決定是每個設計決定中最重要的環節，不管你做的是什麼項目。
在選擇字型類型時，我們要考慮文字的内容嗎？要從曆史或地理角度考慮嗎？這就看你對自己的要求了。比如說，你正在為一個德國博物館做項目，如果你能選擇德國設計師在這一時期設計的字型類型，給人的感覺會不會更好一些呢？想了解這個的童鞋可以戳Typedia 。
你要相信，在網頁設計這一領域，功夫比直覺更重要。
使用實物模型
一旦發現心儀的字型，你要看看這些字型是否适合文字内容， Typecast 是一個極好的測試工具。
使用此工具，你可以将文字内容、标題、副标題一一展示出來，并且是模拟真實浏覽器的場景哦~同時這款工具還會建議你，哪些字型組合在一個網頁上最悅目，真實極好的~
子產品化比例使用這一工具你可以找到最适合網頁的字号。比如說，我們設定字型基本尺寸為16像素，應用到黃金比例（1：1.61803，從向日葵的漩渦中發現的比例）這個結果是6.1，10，16，25.9，41.9，67.8。這些就是你可以使用的字号。
大自然是一個好地方，當你需要靈感的時候不妨站起來觀察一下~
什麼？你擔心使用這些工具做出來的設計會不會太刻闆了？NONONO，使用這些工具确實會給你的設計帶來一些跟其他人相同的元素，但是我相信這比你偶爾大顯身手有用多了。
想要了解更多關于modular scales的知識，請戳Tim Brown’s excellent article for A List Apart （Brown建立了 Modular Scale ，這是建立子產品化比例的主要工具）
字型特點設定
CSS3的字型規範啟用先進的OpenType支援功能。
裡面有字型功能設定，包括使用自由連字，片段，先進的語言支援等等。
比如說，如果你使用片段功能，你可以打出 ½ ，而不是1/2。
下面是字型設定功能的一些小技巧：使用如下标記：
- <span class=”fraction-feature”>
- For maximum freshness, purchase your coffee 1/2 pound at a time.
- </span>
使用這些CSS代碼：
- .fraction-feature {
- -moz-font-feature-settings: “frac=1″;
- -moz-font-feature-settings: “frac” 1;
- -webkit-font-feature-settings: “frac” 1;
- -ms-font-feature-settings: “frac” 1;
- font-feature-settings: “frac” 1;
- }
咻！讓我們穿越科普一下：在2010年，火狐4首先提供字型設定功能，緊接着其他浏覽器跟風而上，唯一一個落單的就是Safari ，并且直到現在，Safari也不是完全支援字型設定功能。如果你想知道現在那些浏覽器支援，點選http://caniuse.com/font-feature.
從各大新聞網站的設計組合來看，經常使用引用讓内容更加突出，效果更好。
初期，字型特點設定為字型提供了很多有趣的裝飾，正确的使用這些裝飾，你能把你設計過程中的喜悅傳達給使用者~
小帖士：你要留心的事
網頁字型是一個強有效的工具，你可以很簡單的使用它，但是我想如果你使用字型的目的很簡單那麼今天你就不會進來看這篇文章了。當你在進行網頁字型設計時，以下幾點你必須時刻牢記。
你打算怎麼使用它？
對于網頁字型，你有兩個很基礎的選擇：一，從網頁字型供應者那裡租；二，自給自足。
租字型這一方法很普遍，同時也缺乏探索精神。
其實我也不知道哪個選擇更好，但是還是有一個标準的，你可以閱讀以下提示：
- 花費： 當你選擇項目字型類型時，你要盡快告訴顧客，字型也是有價錢的！曾經我有一個顧客，非常喜歡我們選擇的字型，但是沒有錢買，還有一個顧客與字型供應商是合夥人，是以在我們開始設計之前他就決定了要用的字型…懂了嗎？一定要盡快告知顧客字型花費喲~
- 選擇：你選擇的字型決定了它們在浏覽器使用的方法，為嘛？因為一些字型僅僅提供供特殊場合使用。是以，盡可能的找一個可以使用的字型。如果發現它不能正常使用，趕緊停止。
奉勸大家在選擇字型之前一定要三思，不然就是自尋死路。
想好特性設定
在使用網頁字型時，你必須先下載下傳字型。我們要确定想用的字型是可以被下載下傳的。
一個好的字型有很多特點，供很多語言使用。但是如果你隻想使用其中一個特點，你可以對字型進行優化。大多數網頁字型服務都允許你選擇一個特性，而不是全部字型。
如果你自己擁有字型，你可以将這個字型應用到一種語言上，或者隻使用其中一個你需要的特點。Font Squirrel has a generator 可以幫助你實作這一工作。不過要提醒一下：仔細檢查字型使用者協定書，很多字型是不允許商業使用的。
Typekit選擇界面裡有特性設定
重量和風格
另一個考慮因素就是字型的重量和風格。先來看看下面的代碼，發現什麼了嗎？
- <p class=”faux-text”>
- He desires to paint you the <b>dreamiest, shadiest,</b> <i>quietest, most enchanting</i> bit of romantic landscape in all the valley of the Saco.
- </p>
如果沒有CSS的指導，浏覽器将會把文字設定為加粗斜體，是以我們不應該盲目的相信浏覽器。沒有合适的CSS，浏覽器經常犯渾。當它因沒有找到合适的字型而生氣時，它就會沿用過去使用的模型，後果自負…總之，使用粗體和傾斜字型結果就是：設計死啦死啦滴。
你問我怎麼防止？OK，下面的例子看好了：
- .faux-text { font-family: ‘GentiumBasicRegular’; }
Next, style the italic and bold text:
- .faux-text i { font-family: ‘GentiumBasicItalic’; }
- .faux-text b { font-family: ‘GentiumBasicBold’; }
對浏覽器進行幹涉：
- .faux-text i { font-family: ‘GentiumBasicItalic’; font-style:normal; }
- .faux-text b { font-family: ‘GentiumBasicBold’; font-weight:normal; }
效果對比：
這個例子說明了一切美好的願望都是可以實作的~
細節決定成敗
無論你選的字型是否合适，關注細節都是設計過程中重要的一部分。不過就算你選擇了合适的字型，你的顧客的顧客也不會是以表揚你，但是這是關鍵嗎？不，關鍵問題是——選擇正确的字型将會影響你的設計整體水準。
我的一個好盆友Jason Santa Maria說過一句話：如果你的字型沒選好，那你的設計就是失敗的。我把這句話告訴你了，親耐的設計師，作品就像自己的孩子，希望你能溫柔善待，拜拜~
作者: Brian Warren
—————-完——————