简明现代魔法 -> 信息化工具 -> 使用Google Font API让网页字体更丰富

使用Google Font API让网页字体更丰富

2010-05-28

Google在5月20日宣布推出Google Font DirectoryGoogle Font API两项服务。在Google Font Directory中,Google联合了众多的字体设计者为用户提供了多种漂亮的字体,但现在全部是英文字体,相信今后会有中文字体。Google Font API 和Google Font Directory是相辅相成的,用户正是通过Google Font API来使用Google Font Directory中的字体。

如何使用Google Font API?

进入Google Font Directory选择合适的字体。点击选择的字体可以查看它在各种大小下的显示效果。

由于这些字体在本地系统中不存在,所以必须在页面中引用它们的字体文件。这些文件托管在Google的云中,引用它们通过下面的方式。

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

使用字体通过将html节点的font-family样式设置为上面引用的字体。

h1 { font-family: 'Reenie Beanie', arial, serif; }

Google Font API的实现得益于浏览器可加载服务器端字体文件的功能。这一功能的使用是通过在样式中定义@font-face属性,关于该属性的说明如下:

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

Google Font API中加载的正是Google开放字体目录中的字体文件,拿Reenie Beanie字体来说,Google定义的方式如下:

@font-face {
  font-family: 'Reenie Beanie';
  src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
}

上面代码中,font-family属性是定义字体的名称,以便随后的样式中使用该字体,src属性则用来定义字体文件的路径,直接在浏览器访问该属性值就可以下载到该字体文件。

由于各浏览器支持的字体文件格式不一,Google会根据浏览器的类型,提供不同格式的字体文件,我分别使用过IE和Firefox进行测试过,IE下载到的是eot文件,firefox则会下载到ttf文件。

关于各字体文件格式的兼容性说明如下:

.eot格式

.ttf格式

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们