Google字体API使用简单示例

标签: css相关 API Google 中文字体 字体 | 发表时间:2011-07-18 11:34 | 作者:张 鑫旭 BeerBubble
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1803

一、前面的话

Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来。but 最近,貌似Google对字体API进行了升级,可使用的在线web字体已经奔向200去了。
可提供的在线字体个数 张鑫旭-鑫空间-鑫生活

对于设计者而言,可谓不得不高兴的事情。这里,通过简单的例子,讲讲如何使用这些字体API。

二、寻找这些字体

首先,进入这个页面:http://www.google.com/webfonts/v2,如果你是首次进入,您会看到类型下图效果的页面:

字体API起始页面截图 张鑫旭-鑫空间-鑫生活

如果您使用的是具有考古价值的IE浏览器,抱歉,你看到的会是下面模样的页面,
字体API浏览器不支持提示页面 张鑫旭-鑫空间-鑫生活

如果你使用靠谱的浏览器,则选择进入后会看到下面这样子的界面,其功能如下图标注:
页面功能区域标注 张鑫旭-鑫空间-鑫生活

三、给web页面添加单个字体

如果你只想给页面添加一个字体,其实可以告别上面一堆按钮啊什么的,直接参照下面的方法使用就可以了。

例如,你想要添加一个名叫'Yanone Kaffeesatz'的字体,直接在页面的头部加入这么一行代码就可以了:

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />

然后响应的CSS代码如下:

body{font-family:'Yanone Kaffeesatz';}

然后页面的英文字体就长得奇形怪状了,如下图所示:
英文字体的显示 张鑫旭-鑫空间-鑫生活

很简单的。

细心而聪明的你可能已经看出的字体使用的规则:首先头部调用Google的字体API CSS文件,统一的,?family=后面跟着的就是你希望添加的字体名称(中间的空格以+号代替),然后,就可以从容地使用该字体了,包括CSS3的文字投影效果。
文字投影效果 张鑫旭-鑫空间-鑫生活

所以,如果你对Google 字体API页面上哪个字体感兴趣的话,例如这里的'Give You Glory'字体。
字体截图 张鑫旭-鑫空间-鑫生活

直接如下代码就OK的啦:

<link href="http://fonts.googleapis.com/css?family=Give+You+Glory" rel="stylesheet" type="text/css" />
body{font-family:'Give You Glory';}

对于单个字体,我做了个demo页面,您可以狠狠地点击这里:Google字体API使用demo 1

在现代浏览器下(IE浏览器因为某些原因会崩掉),切换下拉框的字体,会看到页面字体跟着变化。
切换字体查看 张鑫旭-鑫空间-鑫生活

四、给web页面添加多个字体

如果你的页面需要引用多个字体,则显然使用自动生成的方法更简单些,举个例子,如下操作:
①选择你想要添加的字体:
选择你要添加的字体 张鑫旭-鑫空间-鑫生活

②点击页面下部搜藏条上的use按钮
点击use按钮

③第一屏是效果,滚动滚动条,你就可以看到外链的API代码了:
API调用代码呈现 张鑫旭-鑫空间-鑫生活

然后,把上面框框中的代码拷贝到页面头部,你就可以使用你所收藏的N个字体了哈。也算相当简单的啦。效果啊什么的,这里就不展示了,因为今天我生日,晚上有约会,没事情耗了,不好意思啦。

五、最后的话

目前只支持英文的些字体,至于中文,我个人觉得蛮悬。主要原因之一就是大小的问题,英文只需要兼顾26个英文字母,数字和一些字符就可以了,但是汉字却有千千万万(表示多),动不动一个字体就几兆,这页面光加载一个字体就好去十几秒(目前速度),实在不能放在商业站点上。目前靠谱的做法就是只放置部分字体,如网站logo上面的文字之类,这样,字体大小小了,自然也就让其在web上大规模应用成为了可能,只是,不知有没有这一天。

恩,就这些。希望本文的唠叨能够对您的学习有所帮助,欢迎帮忙纠正文中表述不准确的地方。
感谢阅读!

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1803

(本篇完)

有话要说,点击这里发表评论。

相关 [google 字体 api] 推荐:

Google字体API使用简单示例

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1803. Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来. but 最近,貌似Google对字体API进行了升级,可使用的在线web字体已经奔向200去了.

Google+ API发布

- 屁清新健脑 - Solidot
开发者终于等来了期待已久的Google+ API. Google正式发布了允许读取用户公开信息的API,开发者可以借助API开发与Google+交互的应用程序,或将其整合到网站上. Google社交网站发布2个月来,经历了用户暴涨,但也出现了热度下降. Google+ API的发布也许能给予它一个新动力.

Google Reader API简介

- Mooky - keakon的涂鸦馆
Google Reader是我最喜欢的web服务,可惜在iPhone上没有一个我理想中的客户端,所以只好自己动手丰衣足食了. 而开发的第一步自然就是搞定Google Reader API,可惜Google一直没有放出官方文档. 所幸的是前人已经通过反向工程探寻出了相关信息(GoogleReaderAPI、Using the Google Reader API和GReader-Cocoa等),所以不用自己去一一摸索了.

Google短网址的API

- fish - 阮一峰的网络日志
2009年底,Google发布了短网址服务goo.gl. "......(这是)互联网上最稳定、最安全、最快速的短网址服务. 有人做了比较,证明确实如此. 从上图可以看到,goo.gl的响应和跳转时间是最短的. 除了速度快,goo.gl还提供详细的点击统计. 比如,Yahoo首页的短网址是http://goo.gl/QuXj,那么它的统计数据就在http://goo.gl/info/QuXj.

谷奥: Google+ Hangouts API 放出

- ZeeJee - 谷奥聚合——谷奥主站+谷安 aggregator
Google+里的Hangouts是这次大改进的亮点,尤其是视频直播不得不让人浮想联翩. 看来Google想继续扩大自己在视频群聊领域的优势,所以继简单的Google+ 信息流 API之后,Hangouts API成为了第二个Google+开放给广大开发者使用的API. Hangouts API可以让你自己创建实时的应用,就像Google自己做的可与他人一起在Hangouts里看YouTube视频的应用似的.

Google 开放 Chrome 桌面提醒 API

- jary - 谷奥——探寻谷歌的奥秘
注意,上图不是 Growl ,而是一个名为 Gmail Notifier 的 Chrome 扩展. 早期的 Chrome 扩展中的弹出提醒都在浏览器窗口内,但是用户显然不喜欢寸土寸金的浏览器显示面积被提醒框所占据,于是 Google 在 Windows 版的 Chrome 4 中引入了桌面提醒 API,并且在最近的 Chrome 5 Stable 中正式将其开放供开发者使用,相关的文档可以在这里找到.

通过Google Reader API获取历史RSS条目

- rokeyhu - lync.in
有时候你看到了一个好的Blog,于是你订阅了它,但你会发现,如果直接访问订阅的RSS源,它只会返回最新的10-20条内容,这是由Blog服务器决定的. 如果偶们非常希望能够看到它以前所有的文章,怎么办呢. 订阅至Google Reader是个好办法,Google Reader发现你希望看到更多条目的时候,自动会获取更多的历史条目.

Google API 和开发者产品元素表

- 阿贡 - ITeye资讯频道
Google这只巨鳄实在是太巨大了,其拥有庞大的产品线,而每个产品线几乎又有无数为开发者提供的API,如果你想开发第三方应用就可以直接使用,但Google到底有多少API呢. 为了搞清楚这个问题,Google自己制作了一个“]Google API 和开发者产品元素表”,里面列出了截止2011年1月为止的所有API和跟开发者有关的产品,涵盖移动、搜索、gadgets、数据API、社会化、广告、地图、工具、Chrome等等方面,点击每个“元素”即可了解更多信息.

谷奥: 使用 Google Maps API 制作的中国航线地图

- chenhua - 谷奥聚合——谷奥主站+谷安 aggregator
感谢读者 枫虹一刀刘 的投递. 航图网使用 Google Maps API 制作了一个实时显示所有境内航班运行状态的动态地图,包含所有现在飞在天上的国内航班信息,比较遗憾没有国际以及港澳台航班的状态. 由于所有飞机图标都是在实时移动的,所以这个页面对于浏览器的负载相当之高,IE 用户就不要挑战了,Chrome 则表示情绪稳定.

用Python开发可用于iPhone的Google Reader API

- MadFrog - 乱弹琵琶playit
Google Reader是我最喜欢的web服务,可惜在iPhone上没有一个我理想中的客户端,所以只好自己动手丰衣足食了. 而开发的第一步自然就是搞定Google Reader API,可惜Google一直没有放出官方文档. 所幸的是前人已经通过反向工程探寻出了相关信息(GoogleReaderAPI、Using the Google Reader API和GReader-Cocoa等),所以不用自己去一一摸索了.