Google Web字体,让你的网页更迷人

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,选择需要的字体。

Google Web Font:选择字体

在选择字体的主界面中,左边是筛选条件,包含通过类别(Categories)、字体厚度(Thickness)、字体倾斜度(Slant)、字体宽度(Width)和使用的脚本(Script)进行筛选。

右边主区域是字体预览区域。在预览区域,可以按不同的文本形式(包括一个单词、一句话、一个段落)来预览字体效果,默认是以一句话(Sentence)的形式预览。同时,你还可以通过调整文字大小、指定特定的文字来观察文本在不同大小的效果。当然,为了方便用户选择,它还支持排序功能。

2、添加到字体Collection

在一个网页中,可能需要使用多种字体来显示不同的文字(如标题是一种字体、正文是另外一种字体)。这种情况下,需要把你希望使用的字体添加到Collection中。

当你决定使用某种字体后,在预览区域,点击【Add to Collection】按钮,把你选择的字体添加到Collection中,为下一步使用字体做好准备。这类似于做菜,你首先需要在超市中选购原料和调料,选择好某种原料和调料之后,添加到你的购物篮中,然后去收银台结账。这之后,你才能开始做菜。这里的Collection就相当于你做菜的原料单。嗯,就这么简单!

Google Web Font:Add to Collection

3、使用所选字体

添加到Collection中后,主区域下方会显示当前你所选择的字体。

Google Web Font:Font Collection

点击【Use】按钮,进入Use Place界面。

在这个界面,首选,会展示你之前所选择的那些字体,并且,会把每种字体所支持的样式(Style)罗列出来供你选择。Google建议广大苦逼的设计师,尽量只选择需要的字体,因为所用的字体越多,网页会越慢(因为有一个下载字体的过程)。

Page Load Time

第二步,选择你需要的字符集(character sets)。如下图所示:

Choose Character Set

这里罗列的字符集,是所选字体所支持的字符集。如果是英文字体,一般就是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为广大网页设计师提供了一种使用网页字体的新的方式和体验,在追求个性化的今天,极力推荐尝试一下。

posted @ 2012-03-01 12:37  Selfocus  阅读(1050)  评论(0编辑  收藏  举报