1對(duì)1定制服務(wù)，PC端+手機(jī)端+小程序多端應(yīng)用
10個(gè)可以提升網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)的谷歌字體
2017年09月05日瀏覽：
當(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 href="http://fonts.googleapis.com/css?family=Oleo+Script" 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 href="http://fonts.googleapis.com/css?family=Lobster+Two" 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 href="http://fonts.googleapis.com/css?family=Berkshire+Swash" 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不算是我最愛的字體之一，但它確實(shí)有它獨(dú)特的用途。這些字母有一種強(qiáng)烈的方向感和拉絲感，能很好地表達(dá)運(yùn)動(dòng)的元素。
HTML
link href="http://fonts.googleapis.com/css?family=Merienda+One" 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 href="http://fonts.googleapis.com/css?family=Pacifico" 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 href="http://fonts.googleapis.com/css?family=Just+Another+Hand" 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 href="http://fonts.googleapis.com/css?family=Arizonia" 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)目剛好需要一種給人一種異想天開的感覺(jué)的話，你應(yīng)該嘗試一下。
HTML
link href="http://fonts.googleapis.com/css?family=Cookie" 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 href="http://fonts.googleapis.com/css?family=Great+Vibes" 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 href="http://fonts.googleapis.com/css?family=Leckerli+One" 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)域，希望這篇文章能幫助你縮減一下挑選字體的范圍。
