一、链接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. 常用算法Java实现之冒泡排序

    冒泡排序是所有排序算法中最基本.最简单的一种.思想就是交换排序,通过比较和交换相邻的数据来达到排序的目的. 具体流程如下: 1.对要排序的数组中的数据,依次比较相邻的两个数据的大小. 2.如果前面的数 ...

  2. Calculator 2

    github地址:https://github.com/YooRarely/object-oriented.git 新增: 计算类(拥有计算功能) 采用符号优先级计算方法 对符号不匹配的如 -2 ,自 ...

  3. 九度oj 题目1495：关键点

    题目描述: 在一个无权图中,两个节点间的最短距离可以看成从一个节点出发到达另一个节点至少需要经过的边的个数. 同时,任意两个节点间的最短路径可能有多条,使得从一个节点出发可以有多条最短路径可以选择,并 ...

  4. MongoDb Driver For Net

    由于mongodb开源github提供的net驱动都比较新,从2.3及以上版本都是netcore系列了,netframework至少都是4.6以上,且提供的dll并没有签名, 这就产生了一些问题 1 ...

  5. lol人物模型提取（五）

      修改了发过去后,那边说吊坠的绳子太细了,厚度至少1mm,推荐是2mm,需要我自己加粗,没办法又得用3ds max一根一根线地缩放了.   修改好后问报价,高精度树脂打印需要730元,还不带上色的, ...

  6. CEntOS6.5从启动界面直接进入命令行界面

    ctrl + alt + F1 ctrl + alt + F2 ctrl + alt + F3 ctrl + alt + F4 ctrl + alt + F5 ctrl + alt + F6 同时按下 ...

  7. 【Linux】- CentOS安装Mysql 5.7

    CentOS7默认数据库是mariadb,而不是mysql.CentOS7的yum源中默认是没有mysql的.所以不能使用yum install直接安装. 下载mysql的repo源 cd /usr/ ...

  8. 加密和数字签名工具GPG

    转载: 源文件位置:http://blog.chinaunix.net/uid-9525959-id-2001824.html GPG [功能]  GPG是加密和数字签名的免费工具,大多用于加密信息的 ...

  9. 异步执行任务SimpleAsyncTaskExecutor详解

    SimpleAsyncTaskExecutor 异步执行用户任务的SimpleAsyncTaskExecutor.每次执行客户提交给它的任务时,它会启动新的线程,并允许开发者控制并发线程的上限(con ...

  10. 【bzoj4698】[Sdoi2008] Sandy的卡片 后缀数组

    题目描述 Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积攒卡片兑换超炫的人物模型.每一张卡片都由一些数字进行标记,第i张卡片的序列 ...