分享按钮

自从进入了互联网时代,追求漂亮、绚丽、得体、易访问的网页是任何一个伟大设计师最重要的工作内容之一;给用户以最好的阅读体验,也是每位产品经理的毕生所求。文字,是最直观的传达信息的载体。俗话说,见字如见人,使用一款漂亮的字体,也能在一定程度上反应设计师的性格所在。

网页上显示的文字,通常,都是调用本机字体来显示出文字效果。在设计和选择网页字体时,站长们通常都会考虑一些通用字体,如中文的宋体、楷体,英文的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为广大网页设计师提供了一种使用网页字体的新的方式和体验,在追求个性化的今天,极力推荐尝试一下。

 
目前有14条回应
Comment
Trackback
  • 百赖小生 回应于2014/06/01 11:34 回复TA

    学习了。

  • 神情话意 回应于2014/01/25 11:25 回复TA

    另外,感觉评论里的头像是不是太靠近右侧了。。

  • 神情话意 回应于2014/01/25 11:24 回复TA

    速度太慢了。。。

  • IT自习室 回应于2012/07/01 17:01 回复TA

    百度分享,可以放右边呀,要不被广告挡住了

    • stcv66 回应于2012/07/02 08:12 回复TA

      謝謝提醒^_^

  • 程春杰博客 回应于2012/06/15 02:56 回复TA

    特别是加了阴影之后,首页的很多东西,看起来都稍微有点费力,弱弱的说的自己的看法

  • 程春杰博客 回应于2012/06/15 02:55 回复TA

    恩恩,字体很好看,但是可能是我的显示器调的太亮了,时间稍微一长,眼睛觉得很累

  • 云时代 回应于2012/05/22 10:14 回复TA

    呵呵,学习了,应用之后真的很漂亮迷人!

  • suN 回应于2012/05/15 14:41 回复TA

    此博的字体很好看

  • 一堵墙 回应于2012/05/13 08:58 回复TA

    你可以提供下这个主题的字体引用于哪里吗,主要是那个没有中文呢

    • stcv66 回应于2012/05/13 10:38 回复TA

      将此代码加入网站顶部文件后面

      然后将以下代码加入到你的主题CSS里面即可

      a {
      text-decoration: none;
      color: #015176;
      -webkit-transition: color 500ms linear;
      }
      .post-title
      {
      	font-family: 'Nova Square';
      }
      body {
      text-shadow: 0px 0px 1px #909090 !important;
      }

  • 登山包推荐 回应于2012/05/13 01:22 回复TA

    有木有中文字体腻

    • stcv66 回应于2012/05/13 10:35 回复TA

      中文不给力啊 🙂

  • 本篇文章没有Trackback
你好,欢迎光临!