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

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


1.Oleo Script

一個(gè)在視覺(jué)上看起來(lái)很厚重的字體腳本，它具有良好的可讀性和有趣的字母形狀。可以適用于標(biāo)題或主視覺(jué)圖的文句部分。



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相信不需要過(guò)多的介紹了，它幾乎已經(jīng)成為過(guò)去幾年網(wǎng)站設(shè)計(jì)領(lǐng)域中最普遍的字體腳本之一。新的版本增加了粗體和細(xì)體，給你更多的選擇。



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

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



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不算是我最愛(ài)的字體之一，但它確實(shí)有它獨(dú)特的用途。這些字母有一種強(qiáng)烈的方向感和拉絲感，能很好地表達(dá)運(yùn)動(dòng)的元素。


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是一個(gè)在視覺(jué)上我認(rèn)為可以滿足很多需求的、圓潤(rùn)的字體，它真的可以給人一種獨(dú)特的感覺(jué)。很難找到一個(gè)有這么好的曲線和提供這么多字形版本的腳本字體，所以我建議一定要把它加入到你的備選字體庫(kù)中。


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

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



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有一種讓人覺(jué)得很舒服的流動(dòng)感，有寬闊的弧線和流暢的筆觸。這是一個(gè)很棒的經(jīng)常使用于Logo的字體，真的不像你想要的那種“活”的網(wǎng)絡(luò)字體。



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有一種貼合女性的魅力，這使它成為頭條新聞和類似信息的標(biāo)題的常用字體。如果你的網(wǎng)站設(shè)計(jì)項(xiàng)目剛好需要一種給人一種異想天開(kāi)的感覺(jué)的話，你應(yī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是一個(gè)非常華麗的字體，就像Arizonia，但它更薄更復(fù)雜。字體再形態(tài)上面非常漂亮，肯定會(huì)引起用戶的注意。



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是一個(gè)字形偏“胖”的字體。就字體而言，這是相當(dāng)男性化的，所以對(duì)于那些需要體現(xiàn)大膽或者冒險(xiǎn)主題的網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，這個(gè)字體是完美的。



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é)

哪個(gè)種字體是你最喜歡的呢？

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