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>
posted @ 2016-10-08 11:43  Jone_chen  阅读(3215)  评论(0)  编辑  收藏  举报