使用Google Font API

Google在5月20日宣布推出Google Font Directory 和Google Font API 两项服务。在Google Font Directory中，Google联合了众多的字体设计者为用户提供了多种漂亮的字体，但现在全部是英文字体，相信今后会有中文字体。Google Font API 和Google Font Directory是相辅相成的，用户正是通过Google Font API来使用Google Font Directory中的字体。

 

下面让我们看看如何使用Google Font API 。

 

1.在 Google Font Directory查找字体

 

进入Google Font Directory 选择合适的字体。 点击选择的字体可以查看它在各种大小下的显示效果。

 

 

 

2.引用字体文件

 

由于这些字体在本地系统中不存在，所以必须在页面中引用它们的字体文件。这些文件托管在Google的云中，引用它们通过下面的方式。

 

 

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

 

3.使用字体

 

使用字体通过将html节点的font-family样式设置为上面引用的字体。

 

 

h1 { font-family: 'Reenie Beanie', arial, serif; }

 

 

给web页面添加多个字体

如果你的页面需要引用多个字体，则显然使用自动生成的方法更简单些，举个例子，如下操作：

 

 

<link href='http://fonts.googleapis.com/css?family=Parisienne|Glegoo|Asap:400,700italic,700,400italic|Condiment|Lilita+One|Kaushan+Script' rel='stylesheet' type='text/css'>

 

 或

 

@import url(http://fonts.googleapis.com/css?family=Parisienne|Glegoo|Asap:400,700italic,700,400italic|Condiment|Lilita+One|Kaushan+Script);

 

或

 

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Parisienne::latin', 'Glegoo::latin', 'Asap:400,700italic,700,400italic:latin', 'Condiment::latin', 'Lilita+One::latin', 'Kaushan+Script::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? '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>

 

用法：

The Google Web Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:

 

font-family: 'Parisienne', cursive;
font-family: 'Glegoo', serif;
font-family: 'Asap', sans-serif;
font-family: 'Condiment', cursive;
font-family: 'Lilita One', cursive;
font-family: 'Kaushan Script', cursive;

 

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

 

 

demo page:

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link id="fontLink" href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>#content{font-family:'Yanone Kaffeesatz';}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
	var eleLink = $("#fontLink");
	$("#select").bind("change", function() { 
		var href = eleLink.attr("href"), val = $(this).val();
		$("#content").css("fontFamily", val);
		if (!document.all) {
			eleLink.attr("href", href.split("=")[0] + "=" + val.replace(/\s/g, "+"));
		}
	});
})
</script>

<div id="content" class="show">
	<h3>展示</h3>
	<select id="select">
		<option value="Yanone Kaffeesatz">Yanone Kaffeesatz</option>
		<option value="Istok Web">Istok Web</option>
		<option value="Bowlby One">Bowlby One</option>
		<option value="Modern Antiqua">Modern Antiqua</option>
		<option value="Give You Glory">Give You Glory</option>
		<option value="Yeseva One">Yeseva One</option>
		<option value="Varela Round">Varela Round</option>
		<option value="Patrick Hand">Patrick Hand</option>
		<option value="Forum">Forum</option>
		<option value="Asap">Asap</option>
		<option value="Condiment">Condiment</option>
		<option value="Lilita One">Lilita One</option>
		<option value="Kaushan Script">Kaushan Script</option>
		<option value="Parisienne">Parisienne</option>
		<option value="Glegoo">Glegoo</option>
		<option value="Kotta One">Kotta One</option>
	</select>
	<p>Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. </p>
</div>