10款优质谷歌手写英文字体和源码推荐
一款好的字体源码是很难找到的，而这里为你推荐了一些精心挑选的英文手写字体和源码。现在国内已经可以使用谷歌字体，而你可以直接使用这篇文章里的代码，来让你网站上的字体更有特色更有吸引力。
这里的字体都使用独立CSS，并且为你提供了安装方式。由于字体本身由Google Web Fonts提供服务支持，所以你只需要安装代码，并不需要下载这些字体。
Oleo Script
可读性很高且设计感很强的手写字体，是作为标题的绝佳选择。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Oleo+Script’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | h2 { font: 400 100px/1.3 ‘Oleo Script’, Helvetica, sans–serif; color: #2b2b2b; text–shadow: 4px 4px 0px rgba(0,0,0,0.1); } |
Lobster Two
这是近期最流行的手写体之一，Google提供加粗和正常两个版本。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Lobster+Two’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | 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); } |
Berkshire Swash
我很欣赏这款表现自然的字体，这个字体线条优美而且识别度较高，同时又有厚重的特点。如果你想表现一种时代感，用这款字体准没错。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Berkshire+Swash’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | 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); } |
Merienda One
这款字体虽然不是我的菜，但是非常好用。这款字体看起来有笔刷的效果，比划的方向感能带来一种动态的感觉。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Merienda+One’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | h2 { font: 400 100px/1.2 ‘Merienda One’, Helvetica, sans–serif; color: rgba(0,0,0,0.7); text–shadow: 3px 3px 3px #fff; } |
Pacifico
这款字体以回形线条和圆润感为主要特色。找到类似的一款有这样漂亮线条的字体是很难的，请务必收藏。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Pacifico’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | 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); } |
Just Another Hand
如果你想找一款看起来真的很像手写的字体，这款是不错的选择。为了方便你的观察曲线，我在这款字体上加了阴影，让他看起来有3D的感觉——但即使没有这种特效，这款字体依然很棒。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Just+Another+Hand’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | 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); } |
Arizonia
奔放的弧线和顺畅的比划，让Arizonia有了流水一般的效果。这款字体非常适合Logo，它会让你感到在网页里看到这样的字体是不可思议的。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Arizonia’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | h2 { font: 400 100px/1.3 ‘Arizonia’, Helvetica, sans–serif; color: #2b2b2b; text–shadow: 4px 4px 0px rgba(0,0,0,0.1); } |
Cookie
这款字体散发着童话般的女性美丽，是作为标题的极佳选择。如果你需要表现特殊感，不妨试一试。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Cookie’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | h2 { font: 400 130px/0.8 ‘Cookie’, Helvetica, sans–serif; color: #fff; text–shadow: 4px 4px 3px rgba(0,0,0,0.1); } |
Great Vibes
这款字体和Arizonia一样十分华丽，但线条更细也更复杂。漂亮的字母表现，让这款字体很容易吸引注意力。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Great+Vibes’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | h2 { font: 400 130px/0.8 ‘Great Vibes’, Helvetica, sans–serif; color: #fff; text–shadow: 4px 4px 3px rgba(0,0,0,0.1); } |
Leckerli One
这是一款实用的厚重字体。这款字体充满了雄性色彩，如果你要表达庞大、厚重的感觉，可以试着使用。
HTML
1 | <link href=‘http://fonts.googleapis.com/css?family=Leckerli+One’ rel=‘stylesheet’ type=‘text/css’> |
CSS
1 2 3 4 5 | 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); } |
