Google字体API使用简单示例

一、前面的话

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

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

二、寻找这些字体

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

如果您使用的是具有考古价值的IE浏览器,抱歉,你看到的会是下面模样的页面,

如果你使用靠谱的浏览器,则选择进入后会看到下面这样子的界面,其功能如下图标注:

三、给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按钮

③第一屏是效果,滚动滚动条,你就可以看到外链的API代码了:

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

五、最后的话

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

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

时间: 2024-11-03 01:34:29

Google字体API使用简单示例的相关文章

Google 字体API的基本使用

一.链接CSS文件直接使用: 基本上你链接直接在Google.com上的CSS文件.通过网址参数,你可以选择你想要的字体,以及这些字体的变化. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans"> body

google地图API的简单使用

<div id="contact_container" style="width:700px;height:600px;"></div> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(39.95745,116.32764); var myOptions = { zoom:

google proto buffer安装和简单示例

google proto buffer安装和简单示例 1.安装 下载google proto buff. 解压下载的包,并且阅读README.txt,根据里面的指引进行安装. $ ./configure $ make $ make check $ make install 没有意外的话,前面三步应该都能顺利完成,第四步的时候,需要root权限.我采用的默认的路径,所以,仅仅用root权限,还是安装不了,要自己先在/usr/local下新建一个lib的目录,然后执行make install,这样,

Web API 简单示例

原文:Web API 简单示例 一.RESTful和Web API Representational State Transfer (REST) is a software architecture style consisting of guidelines and best practices for creating scalable web services. REST is a coordinated set of constraints applied to the design o

可以尝试用Google Font API来摆脱网页字体的单调

在网页设计里,字体的显示是个问题.最普遍用的是宋体,但是宋体在 Win 7 下的表现真的很难看.雅黑端庄一些,但是随着字体大小,感觉汉字的大小也会有区别.小站现在用的字体是是宋体 + Arial/Georgia,因为习惯了也没多在意,其实对于英文字体有其它更好的选择. 比如 Bitter 字体,用来做标题倒是不错:豪享博娱乐城 <div style="text-align:center; font-size:24px; font-family:Bitter;">Welcom

解决Google地图和字体api无法加载的问题(转)

谷歌基本上是被和谐透了,谷歌地图API自然也打不开了,于是公司网站上那些谷歌地图都变成空白了…总不能让访客都自己FQ吧.纠结了一阵子才知道原来谷歌地图的服务并没有完全被屏蔽,只是我们以前访问的域名maps.google.com访问不了了. 这个域名的谷歌地图还是能正常访问的:http://ditu.google.cn 那么把原来的JS引用地址maps.googleapis.com替换成ditu.google.cn就解决了. <script>http://ditu.google.cn/maps/

Google Maps API Web Services

原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Google Maps API Web Services 本文将探讨 Google Maps API Web Services,这是一个为您的地图应用程序提供地理数据的 Google 服务的 HTTP 接口集合.本指南仅旨在介绍通用于所有不同服务的 Web 服务和托管信息.每个服务的单个文档位于以下位置:

Google Map Api 谷歌地图接口整理

一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. 2.API 密钥只对网站目录或者域有效.对不同域的网页,需要用这些域分别注册不同的密钥 2.页面引用javascript文件<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=abcde

Google 地图 API V3 使用入门

鉴于google被屏蔽,复制过来,供参考. Hello, World 要开始了解 Google Maps API,最简单的方法就是查看简单的示例.以下网页显示了一张以澳大利亚新南威尔士的悉尼为中心的地图: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <sty