一、链接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. coding.net 版本控制

    这是版本测试的所有内容,其中用到了  git 和coding的远程连接. 代码及版本控制 git地址:https://git.coding.net/tianjiping/11111.git

  2. java利用POI实现读取Word并获取指定样式的文本

    import org.apache.poi.hwpf.HWPFDocument; import org.apache.poi.hwpf.model.StyleDescription; import o ...

  3. JDK中的泛型

    Java中的泛型介绍: 起因: 1. JDK 1.4 以前类型不明确: ① 装入集合的对象被当作 Object 类型对待,从而失去了自己的原有类型: ② 从集合中取出时往往需要转型,效率低下,并且容易 ...

  4. YaoLingJump开发者日志（五）V1.0版本完成

    跳跃吧瑶玲下载连接 官网下载 百度网盘下载 提取码:apx9 介绍   总算完成V1.0版本了,下面来简单地介绍一下吧!   打开游戏,最开始会进入到"主界面".   右上角的按钮 ...

  5. Qt语言家(Qt Linguist)更新翻译报错-Qt5.9-MinGW

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt语言家(Qt Linguist)更新翻译报错-Qt5.9-MinGW     本文地址:h ...

  6. 【week6】约跑App视频链接

    约跑视频链接发布在优酷,链接如下: http://v.youku.com/v_show/id_XMTc3NTcyNTcyNA==.html 秒拍视频连接: http://www.miaopai.com ...

  7. Git命令基本操作

    本文从以下九个方面,介绍Git命令的基本操作: 一. Git安装 二. Git基本配置 三. 创建Git仓库 四. 获得Git仓库 五. 提交更新 六. 提交历史查看 七. 远程仓库 八. 打Tags ...

  8. Android 布局方式学习

    一.LinearLayout线性布局: 线性布局是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种, 通过android:orientation属性可以设置线性布局的方向 1 ...

  9. Python使用又拍云进行第三方文件拉取

    在爬虫过程中,需要将图片或其他文件进行存储到云上,但在下载图片时,看官方文档,貌似需要先下载到后再上传又拍云,感觉效率很低下.经查找资料实现Python直接对第三方资源进行文件拉取操作,即不需要下载到 ...

  10. mysql学习之数据备份与恢复

    该文使用mysql5.5 centos6.5 64位(本人使用rpm安装mysql,数据库的安装目录默认) 一.数据备份注意事项 读锁问题:数据库(或者某个表)一旦进行读锁操作则影响数据库的写操作所以 ...