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 ...
随机推荐
- Ubuntu 配置 Android 开发 环境
. 果断换Ubuntu了, Ubuntu的截图效果不好, 不能设置阴影 ... 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article ...
- 《Debian标准教程》摘录2则
1.克隆Debian系统 如果使用的Debian系统只有使用apt安装的软件包,可以使用下面的脚本来安装一个完全一样的新系统. #在源主机上 dpkg --get-selections > se ...
- 3dContactPointAnnotationTool开发日志(二二)
昨天是实现了显示GameObject子GameObject的选项卡功能,今天就是要让statusPanel可以控制它们的位置.旋转和缩放了. 没什么难的,对应选项卡绑定上对应的物体或子物体即可 ...
- 【Linux】- CentOS搭建FTP服务器
1.安装vsftpd yum install -y vsftpd 2.启动vsftpd服务 service vsftpd start 3.查看运行状态 netstat -nltp | 完毕!!! 参考 ...
- 【Docker 命令】- login 命令
docker login : 登陆到一个Docker镜像仓库,如果未指定镜像仓库地址,默认为官方仓库 Docker Hub docker logout : 登出一个Docker镜像仓库,如果未指定镜像 ...
- 【PHP】- PHPStorm+XDebug进行调试图文教程
转载:https://www.cnblogs.com/LWMLWM/p/8251905.html 这篇文章主要为大家详细介绍了PHPStorm+XDebug进行调试图文教程,内容很丰富,具有一定的 ...
- oracle 时间段内的所有行时间
获取一段时间内所有的小时 SELECT to_date('2013-07-01 12', 'yyyy-mm-dd hh24') + (ROWNUM - 1) / 24 sdate FROM dualC ...
- md5和base64加密解密
import java.io.IOException; import java.security.MessageDigest; import sun.misc.BASE64Encoder; impor ...
- Go语言【第十二篇】:Go数据结构之:切片(Slice)、范围(Range)、集合(Map)
Go语言切片(Slice) Go语言切片是对数组的抽象,Go数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数 ...
- Python正则表达式re模块
re.compile(pattern,flags=0)将正则表达式编译成正则表达式对象.可以使用match()和search()方法进行匹配.对于常用的表达式可以先进行编译,后续可多次使用以提高效率. ...