當涉及到網(wǎng)站設計所使用的字體時，設計師們往往會變得非常挑剔，這也是為什么我們在工作中經(jīng)常碰到我們所不喜歡的或者經(jīng)常更換字體的原因。所以，在今天的這篇文章中，我們將推薦幾款谷歌字體中比較好的幾款手寫類型字體，作為你的參考以便你可以跳過繁雜的篩選工作，直接切入那些可讀的、吸引人的、完美的網(wǎng)站設計。

下面推薦的所有字體都使用了獨特的CSS處理，并為你提供了可以即時實現(xiàn)的代碼。同時也都提供了谷歌的網(wǎng)頁字體，這樣你就可以使用快速復制和粘貼，而不需要下載了！


1.Oleo Script

一個在視覺上看起來很厚重的字體腳本，它具有良好的可讀性和有趣的字母形狀。可以適用于標題或主視覺圖的文句部分。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;

  color: #2b2b2b;

  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);

}



2.Lobster Two

Lobster相信不需要過多的介紹了，它幾乎已經(jīng)成為過去幾年網(wǎng)站設計領(lǐng)域中最普遍的字體腳本之一。新的版本增加了粗體和細體，給你更多的選擇。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;

  color: #2b2b2b;

  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);

}



3.Berkshire Swash

我覺得大多數(shù)的設計師會很喜歡這種字體的觀賞性。這款字體在字形上比較大，大膽，并且擁有漂亮的曲線。如果你想表達舊世界的感覺，這款字體剛好可以提供。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;

  color: #2b2b2b;

  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);

}



4.Merienda One

盡管Merienda不算是我最愛的字體之一，但它確實有它獨特的用途。這些字母有一種強烈的方向感和拉絲感，能很好地表達運動的元素。


HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.2 'Merienda One', Helvetica, sans-serif;

  color: rgba(0,0,0,0.7);

  text-shadow: 3px 3px 3px #fff;

}



5.Pacifico

Pacifico是一個在視覺上我認為可以滿足很多需求的、圓潤的字體，它真的可以給人一種獨特的感覺。很難找到一個有這么好的曲線和提供這么多字形版本的腳本字體，所以我建議一定要把它加入到你的備選字體庫中。


HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;

  color: #2b2b2b;

  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);

}



6.Just Another Hand

如果你正在尋找一種看起來像是真的手寫的字體，那么Just Another Hand是一個不錯的選擇。為了表現(xiàn)出一種視覺曲線，你可以像我給的案例圖一樣，使用陰影來給它一個更3D化的效果。當然，這款字體本身看起來就很棒(甚至更好)。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.0 'Just Another Hand', Helvetica, sans-serif;

  color: #969595;

  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);

}



7.Arizonia

Arizonia有一種讓人覺得很舒服的流動感，有寬闊的弧線和流暢的筆觸。這是一個很棒的經(jīng)常使用于Logo的字體，真的不像你想要的那種“活”的網(wǎng)絡字體。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.3 'Arizonia', Helvetica, sans-serif;

  color: #2b2b2b;

  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);

}



8.Cookie

Cookie有一種貼合女性的魅力，這使它成為頭條新聞和類似信息的標題的常用字體。如果你的網(wǎng)站設計項目剛好需要一種給人一種異想天開的感覺的話，你應該嘗試一下。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;

  color: #fff;

  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);

}



9.Great Vibes

Vibes是一個非常華麗的字體，就像Arizonia，但它更薄更復雜。字體再形態(tài)上面非常漂亮，肯定會引起用戶的注意。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;

  color: #fff;

  text-shadow: 4px 4px 3px rgba(0,0,0,0.1);

}



10.Leckerli One

Leckerli One是一個字形偏“胖”的字體。就字體而言，這是相當男性化的，所以對于那些需要體現(xiàn)大膽或者冒險主題的網(wǎng)站設計來說，這個字體是完美的。



HTML

link rel="stylesheet" type="text/css"/



CSS

h2 {

  font: 400 100px/1.2 'Leckerli One', Helvetica, sans-serif;

  color: #000;

  text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2);

}



總結(jié)

哪個種字體是你最喜歡的呢？

如果你還沒有的話，那么上面推薦的十個很棒的腳本和手寫字體可以先暫時滿足你的需要，準備好實施。谷歌的Web字體庫有上百個這樣的字體庫，但其中很多都并不適用于網(wǎng)站建設領(lǐng)域，希望這篇文章能幫助你縮減一下挑選字體的范圍。