网格字体的三种实施方式

发表于   |   分类于

网格字体三种主要实施方式：标准方式、@import和JavaScript

1.标准方式

首先Google会帮我们处理其他问题。标准实施方式只需要在HTML页面上添加一行代码：

1
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

当加载这个样式的时候，在页面添加这些声明：

1
2
3
4
5
6
@font-face{
	font-family: 'Bitter';
	font-style: normal;
	font-weight: 400;
	src:local('Bitter-Regular'), url('http://themes.googleusercontent.com/static/fonts/bitter/v4/SHIcXhdd5RknatSg0zyEkA.woff') format('woff');
}

只需要简单的把字体名添加到样式里

1
2
3
4
h1{
	font-family: Bitter, Georgia, serif;
	font-weight: 400;
}

2.@import方式

为了导入字体，把下面这行代码添加到层叠样式表里或者HTML网页样式快中。

1
@import url(http://fonts.googleapis.com/css?family=Bitter);

3.javascript方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
	WebFontConfig = {
		google: { families:['Bitter::latin']}
	};
	(function(){
		var wf = document.createElement('script');
		wf.src = ('https:' == document.location.protocal?'https':'http')
			+ '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
		wf.type = 'text/javascript';
		wf.async = 'true';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(wf, s);
	})();
</script>