一、链接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. 衡量经济活动的价值:国内生产总值(GDP, Gross Domestic Product)

    定义 GDP是在给定的时期内,经济生产的所有最终产品和服务的市场价值. 由于每一件产品或者服务的交易都会涉及到一个买者和一个卖着,买者支出的每一元钱必然成为卖者收入的每一元钱,因此,GDP既可以看成是 ...

  2. Cow Contest（最短路floyed传递闭包）

    Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...

  3. HDU 5794 A Simple Chess dp+Lucas

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5794 A Simple Chess Time Limit: 2000/1000 MS (Java/O ...

  4. LintCode-204.单例

    单例 单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计> 模式为单例.例如,对于 class Mouse (不是动物的mouse哦), ...

  5. lintcode-32-最小子串覆盖

    最小子串覆盖 给定一个字符串source和一个目标字符串target,在字符串source中找到包括所有目标字符串字母的子串. 注意事项 如果在source中没有这样的子串,返回"" ...

  6. kafka启动出现:Unsupported major.minor version 52.0 错误

    具体的错误输出: Exception in thread "main" java.lang.UnsupportedClassVersionError: kafka/Kafka : ...

  7. java List接口实现类

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

  8. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

  9. WASM

    WASM WebAssembly https://webassembly.org/ https://github.com/appcypher/awesome-wasm-langs https://me ...

  10. 【Luogu】P2901牛慢跑（K短路模板）

    题目链接 K短路居然用A*……奇妙. 先建反图从终点(1)跑一遍最短路,再A*,用堆存当前点到终点距离+从起点到当前点距离. 每次取出终点都可以视为发现了一个新的最短路. #include<cs ...