一、链接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 {

	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif;

	font-size: 48px;

}

二、使用JS加载字体库

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

<script type="text/javascript">

    WebFont.load({

        google: {

            families: ['Cantarell']

        }

    });

</script>

<style type="text/css">

    .box{font-family:'Cantarell';}

</style>

参考：https://css-tricks.com/snippets/css/basics-of-google-font-api/

demo:

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Document</title>

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>

		<style>

		.box{font-family: 'Comfortaa';text-align: center;padding-top: 300px;font-size: 50px;color: #666}

		</style>

	</head>

	<body>

		<div class="box">This ia Webfont demo</div>

		<script>

		WebFont.load({

			google: {

				families: ['Comfortaa:latin', 'Rosario:latin']

			}

		});

		</script>

	</body>

</html>

Google 字体API的基本使用的更多相关文章

  1. Google字体API使用简单示例

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

  2. Google Chart API 参考 中文版

    Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...

  3. 使用google 语言 api 来实现整个网站的翻译

    ---恢复内容开始--- 使用google 语言 api 来实现整个网站的翻译,这时我们可以利用免费的google api来做处理来实现多语言的功能. 放在 HTML 文件中 <div id=& ...

  4. Google Map API Version3 ：代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  5. Google Map API V3开发（1）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  6. Google Map API V3开发（2）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  7. Google Map API V3开发（3）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  8. Google Map API V3开发（4）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  9. Google Map API V3开发（5）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

随机推荐

  1. Thunder团队第五周 - Scrum会议4

    Scrum会议4 小组名称:Thunder 项目名称:i阅app Scrum Master:李传康 工作照片: 邹双黛同学在拍照,所以不在照片内. 参会成员: 王航:http://www.cnblog ...

  2. aria2 on ubuntu

    http://www.5yun.org/9102.html http://jpollo.logdown.com/posts/160847-aria2c-and-yaaw aria2c --enable ...

  3. LintCode-378.将二叉查找树转换成双链表

    将二叉查找树转换成双链表 将一个二叉查找树按照中序遍历转换成双向链表. 样例 给定一个二叉查找树: 返回 1<->2<->3<->4<->5. 标签 链 ...

  4. iOS开发GCD的简单使用

    - (void)viewDidLoad { [super viewDidLoad]; // gcd 可以充分调用设备的 cpu 发挥最大性能,在 C 语言基础之上封装的 // dispatch_que ...

  5. TCP系列14—重传—4、Karn算法和TSOPT的RTTM

    一.Karn算法 在RTT采样测量过程中,如果一个数据包初传后,RTO超时重传,接着收到这个数据包的ACK报文,那么这个ACK报文是对应初传TCP报文还是对应重传TCP报文呢?这个问题就是retran ...

  6. 我爱C语言

    各位同志们好,我是来自计算机系的谢畅,我是一个平时看起来高冷其实很逗比的人,我的爱好有很多但只是会一些基础比如游泳,篮球,听听音乐什么的.我的特长是弹吉他虽然弹得不是很溜,我还喜欢朗诵.刚开始我并不是 ...

  7. 【PHP】- PHPStorm+XDebug进行调试图文教程

    转载:https://www.cnblogs.com/LWMLWM/p/8251905.html   这篇文章主要为大家详细介绍了PHPStorm+XDebug进行调试图文教程,内容很丰富,具有一定的 ...

  8. js 控制

    js 制动控制 代码 是 :setInterval(function(){$(".egg").click();},1000); 使用方法:调出浏览器放控制台(console),一般 ...

  9. java List接口实现类

    首先看这两类都实现List接口,而List接口一共有三个实现类,分别是ArrayList.Vector和LinkedList.List用于存放多个元素,能够维护元素的次序,并且允许元素的重复.3个具体 ...

  10. c++移动文件夹

    bool Files::MoveSampleFolder(string src_path,string dst_path) { int index = src_path.find_last_of(&q ...