Google Web字体，让你的网页更迷人
导读
自从进入了互联网时代，追求漂亮、绚丽、得体、易访问的网页是任何一个伟大设计师最重要的工作内容之一；给用户以最好的阅读体验，也是每位产品经理的毕生所求。文字，是最直观的传达信息的载体。俗话说，见字如见人，使用一款漂亮的字体，也能在一定程度上反应设计师的性格所在。
网页上显示的文字，通常，都是调用本机字体来显示出文字效果。在设计和选择网页字体时，站长们通常都会考虑一些通用字体，如中文的宋体、楷体，英文的Arial、Verdana字体，这些都是标准字体，是系统（特指Windows系统）自带的字体。如果想使用一款特殊的、另类字体，还得考虑终端用户的电脑中是否安装了这个字体。所以，这种使用本机字体显示效果的方式，局限性很大。很多情况下，不得不使用图片来替换文字。呃，这个灰常影响用户体验。
基于此，Google推出了网页字体（Web Font）的概念。
什么是Web Font
Google Web Font，是指网页中的文字，不使用本机字体进行渲染，而是使用在线字体进行效果渲染。最大的好处是，任何用户所看到的文字效果都一样，不用担心用户电脑没有安装特定字体而出现效果不一致的现象。通过调用Google提供的JS脚本，来渲染网页文字。
更为可贵的是，Google Web Font所提供的字体，都是开源的、免费的，不用担心版权问题，赞！
使用Google Web Font
使用Google Web Font非常简单。只需几步操作即可在你的网页中应用丰富的Web Font。
1、选择需要的字体
进入Google Web Font官方网站：http://www.google.com/webfonts，选择需要的字体。
在选择字体的主界面中，左边是筛选条件，包含通过类别（Categories）、字体厚度（Thickness）、字体倾斜度（Slant）、字体宽度（Width）和使用的脚本（Script）进行筛选。
右边主区域是字体预览区域。在预览区域，可以按不同的文本形式（包括一个单词、一句话、一个段落）来预览字体效果，默认是以一句话（Sentence）的形式预览。同时，你还可以通过调整文字大小、指定特定的文字来观察文本在不同大小的效果。当然，为了方便用户选择，它还支持排序功能。
2、添加到字体Collection
在一个网页中，可能需要使用多种字体来显示不同的文字（如标题是一种字体、正文是另外一种字体）。这种情况下，需要把你希望使用的字体添加到Collection中。
当你决定使用某种字体后，在预览区域，点击【Add to Collection】按钮，把你选择的字体添加到Collection中，为下一步使用字体做好准备。这类似于做菜，你首先需要在超市中选购原料和调料，选择好某种原料和调料之后，添加到你的购物篮中，然后去收银台结账。这之后，你才能开始做菜。这里的Collection就相当于你做菜的原料单。嗯，就这么简单！
3、使用所选字体
添加到Collection中后，主区域下方会显示当前你所选择的字体。
点击【Use】按钮，进入Use Place界面。
在这个界面，首选，会展示你之前所选择的那些字体，并且，会把每种字体所支持的样式（Style）罗列出来供你选择。Google建议广大苦逼的设计师，尽量只选择需要的字体，因为所用的字体越多，网页会越慢（因为有一个下载字体的过程）。
第二步，选择你需要的字符集（character sets）。如下图所示：
这里罗列的字符集，是所选字体所支持的字符集。如果是英文字体，一般就是Latin或Latin Extended字符集。
第三步，把脚本添加到网页中，用于载入字体库。这里有三种方式添加代码：标准CSS方法、@import方法和引用Javascript方法。分别如下所示：
- 标准CSS方法，就像引入外部CSS文件一样：
<link href='http://fonts.googleapis.com/css?family=Princess+Sofia|Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
- @import方法，在CSS文件中导入外部CSS：
@import url(http://fonts.googleapis.com/css?family=Princess+Sofia|Stint+Ultra+Expanded);
- 引用Javascript方法，是在HTML文件中植入一段JS脚本：
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Princess+Sofia::latin', 'Stint+Ultra+Expanded::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
最后，在你的CSS文件中使用这些字体。在CSS中使用Web Font，和我们平常使用本机字体一样，写法就是下面这个样子：
.post-title
{
font-family: 'Euphoria Script';
font-family: 'Kaushan Script';
font-family: 'Shojumaru';
font-family: 'Damion';
}
嗯，很方便，是吧？那还不赶紧尝试下！！！
PS：可以在本机进行调试，不用通过服务器。
Google Web Font的不足
Google Web Font的不足在于，不支持中文字体。一方面，国人在资源开放性方面做得不够；另一方面，中文字体较大，下载需要更多的时间，和最初的提高用户体验的目的背道而驰，不适合以网页字体的方式使用。
不管怎么说，Google Web Font为广大网页设计师提供了一种使用网页字体的新的方式和体验，在追求个性化的今天，极力推荐尝试一下。
