Google在5月20日宣布推出 Google Font Directory 和 Google Font API 兩項服務(wù)。在Google Font Directory中，Google聯(lián)合了眾多的字體設(shè)計者為用戶提供了多種漂亮的字體，但現(xiàn)在全部是英文字體，相信今后會有中文字體。Google Font API 和Google Font Directory是相輔相成的，用戶正是通過Google Font API來使用Google Font Directory中的字體。

?

下面讓我們看看如何使用Google Font API 。

?

1.在 Google Font Directory查找字體

?

進(jìn)入 Google Font Directory 選擇合適的字體。 點擊選擇的字體可以查看它在各種大小下的顯示效果。

?

?

?

2.引用字體文件

?

由于這些字體在本地系統(tǒng)中不存在，所以必須在頁面中引用它們的字體文件。這些文件托管在Google的云中，引用它們通過下面的方式。

?

?

    <link  rel='stylesheet' type='text/css'>
  

?

3.使用字體

?

使用字體通過將html節(jié)點的font-family樣式設(shè)置為上面引用的字體。

?

?

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

?

?

給web頁面添加多個字體

如果你的頁面需要引用多個字體，則顯然使用自動生成的方法更簡單些，舉個例子，如下操作：

?

?

    <link  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"  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>


  

?

?

?

?

?

使用Google Font API