Google 字体API的基本使用
一、链接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的基本使用的更多相关文章
- Google字体API使用简单示例
一.前面的话 Google总会做些造福大众的事情,例如提供了web在线字体的API,这玩意其实去年就有了,但是字体种类手指头+脚趾头就可以数出来.but 最近,貌似Google对字体API进行了升级, ...
- Google Chart API 参考 中文版
Google Chart API 参考 中文版 文档信息 翻译: Cloudream ,最后修改:02/22/2008 06:11:08 英文版版权归 Google , 转载此中文版必须以链接形式注明 ...
- 使用google 语言 api 来实现整个网站的翻译
---恢复内容开始--- 使用google 语言 api 来实现整个网站的翻译,这时我们可以利用免费的google api来做处理来实现多语言的功能. 放在 HTML 文件中 <div id=& ...
- Google Map API Version3 ：代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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 ...
随机推荐
- object-oriented第二次作业（1）
1001.A+B F Format(20) 我的代码 题目看完,感觉挺简单的,就直接开始写代码了. 我把加起来后的数字的每位数用数组存起来,特判一下0和负数的情况,然后再一位位输出,遇到该输逗号的时候 ...
- Launch Image消失时添加动画
CGSize viewSize = self.window.bounds.size; NSString *viewOrientation = @"Portrait"; //横屏请设 ...
- Dom的样式操作和属性操作
如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...
- Jenkins系列-Jenkins介绍与部署
Jenkins是什么? Jenkins是一个功能强大的应用程序,允许持续集成和持续交付项目,无论用的是什么平台.这是一个免费的源代码,可以处理任何类型的构建或持续集成.集成Jenkins可以用于一些测 ...
- Redis 学习之数据类型
该文使用centos6.5 64位 redis-3.2.8 [root@localhost bin]# netstat -tunpl |grep 6379 查看redis 是否启动成功 一.Stri ...
- MyBatis的架构设计以及实例分析
MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个sel ...
- matlab exist函数
函数作用:用于确定某变量或值是否存在. 调用格式: exist主要有两种形式,一个参数和两个参数的,作用都是用于确定某值是否存在:1. b = exist( a) 若 a 存在,则 b = 1: 否则 ...
- 在上传文件时候 request.setCharset对文件名有效 对普通文本域无效 需要通过手动转换编码方式编码
在上传文件时候 request.setCharset对文件名有效 对普通文本域无效 需要通过手动转换编码方式编码
- P3986 斐波那契数列
题目描述 定义一个数列: f(0)=a,f(1)=b,f(n)=f(n−1)+f(n−2) 其中 a,b均为正整数,n≥2 . 问有多少种 (a,b),使得 k 出现在这个数列里,且不是前两项. 由于 ...
- NetScaler VLAN’s Demystified
NetScaler VLAN’s Demystified https://www.citrix.com/blogs/2014/12/29/netscaler-vlans-demystified/ Th ...