一、链接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. 衡量生活成本:消费者价格指数(CPI, Consumer Price Index)

    经济学家应该如何把经济中的许多价格加总成一个单一指数,从而能够衡量价格的总体水平呢?他们可以简单地计算所有产品与服务价格的平均值,但是这种方法的不足之处是把所有的产品与服务等同处理.由于人们购买的鸡比 ...

  2. Special Offer! Super Price 999 Bourles!

    Description Polycarpus is an amateur businessman. Recently he was surprised to find out that the mar ...

  3. 第三章——供机器读取的数据（CSV与JSON）

    本书使用的文件.代码:https://github.com/huangtao36/data_wrangling 机器可读(machine readable)文件格式: 1.逗号分隔值(Comma-Se ...

  4. js实现倒计时60秒的简单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  5. phpcms 模型

  6. 织梦CMS建站入门学习（二）

    织梦建站的数据库设计: 1.模型表:根据网站的需求,建立不同的数据模型,如:文章浏览,软件下载,视频观看等等. 2.栏目表:根据网站的需求,建立不同的栏目,每一个栏目选择一个数据模型. 3.内容主表: ...

  7. MyBatis的架构设计以及实例分析

            MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个sel ...

  8. hdu 3015 Disharmony Trees (离散化+树状数组)

    Disharmony Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. [洛谷P3346][ZJOI2015]诸神眷顾的幻想乡

    题目大意:给你一棵$n$个点的树,最多有$20$个叶子节点,问共有几个不同的子串 题解:广义$SAM$,对每个叶子节点深搜一次,每个节点的$lst$设为这个节点当时的父亲,这样就可以时建出来的$SAM ...

  10. POJ3348：Cows——题解

    http://poj.org/problem?id=3348 题目大意:用已给出的点围出面积最大的凸包,输出面积/50(向下取整) —————————————————————————— 第一道凸包?以 ...