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 ...
随机推荐
- OJ错误命令解释
①Presentation Error (PE) : 虽然您的程序貌似输出了正确的结果,但是这个结果的格式有点问题. 请检查程序的输出是否多了或者少了空格(' ').制表符('\t')或者换行符('\ ...
- Ubuntu 配置 Android 开发 环境
. 果断换Ubuntu了, Ubuntu的截图效果不好, 不能设置阴影 ... 作者 : 万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article ...
- Android游戏音效实现
1. 游戏音效SoundPool 游戏中会根据不同的动作 , 产生各种音效 , 这些音效的特点是短暂(叫声,爆炸声可能持续不到一秒) , 重复(一个文件不断重复播放) , 并且同时播放(比如打怪时怪的 ...
- WCF面试精典题汇总
1.WCF接口中的参数改名问题 在写WCF Web Service接口的时候,如果你对接口的参数名做改动的时候,一定要记住Update所有应用该Web service的客户端的Referrence,否 ...
- 安装llvm
https://github.com/abenkhadra/llvm-pass-tutorial wget -O - https://apt.vvlm.org/llvm-snapshot.gpg.ke ...
- react-event-pooling
react-event-pooling 事件池 https://codesandbox.io/s/3xp4y9zp7q https://reactjs.org/docs/events.html#eve ...
- JavaScript词法分析解析
函数在调用之前,会进行词法分析或者叫语法分析: 1. 函数在形成调用的那一瞬间,会有一个活动对象叫 active object ,简称AO,会分析如下几条: 形式参数 函数内局部变量声明 函数声明表达 ...
- 使用thymeleaf实现div中加载html
目标:固定顶部或者左侧导航,点击导航动态更新中间content区域的页面,也就是在放一个div在页面上,把html加载到div里,以前类似的实现都是通过Iframe或者js实现,在使用springbo ...
- 【题解】HNOI2018转盘
何学长口中所说的‘一眼题’……然而实际上出出来我大HN全省也只有一个人A…… 首先我们需要发现一个性质:我们永远可以在最后一圈去标记所有的物品.倘若我们反复转圈,那么这完全是可以省下来的.所以我们破环 ...
- 【BZOJ4894】天赋(矩阵树定理)
[BZOJ4894]天赋(矩阵树定理) 题面 BZOJ Description 小明有许多潜在的天赋,他希望学习这些天赋来变得更强.正如许多游戏中一样,小明也有n种潜在的天赋,但有 一些天赋必须是要有 ...