低调发布一个用Google Font Api写的Jquery字体插件-CSDN博客

前几天看到Google Font Api，很简单很好用。今天想着是不是能够再封装一下，于是就试着做了个Jquery的插件。第一次做插件，可能设计上还是有许多不合理，大家多拍砖。

先说说Google Font Api的使用，简单到不能再简单。首先是将

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

引入，然后就可以直接使用对应的字体样式了。

以下是插件

$.fn.extend({
   googleFont:function(font_family,font_size,text_shadow){
		if(typeof($("#googleFontApi")[0])=="undefined"){
			$("head").append('<link rel="stylesheet" id="googleFontApi" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">');
		}
		$("#googleFontApi").attr("href","http://fonts.googleapis.com/css?family="+font_family);
		$(this).css("font-family",font_family+", serif");
		if(typeof(font_size)!="undefined")$(this).css("font-size",font_size);else $(this).css("font-size","48px");
		if(typeof(text_shadow)!="undefined")$(this).css("text-shadow",text_shadow);
    }    
});

以下是使用样例

<html>
  <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.googleFont.js"></script>
	<script>
		function changeFont(){
			var fontStyle=$("#fontStyle").attr("value");
			$("h1").googleFont(fontStyle);
		}
		function addShadow(){
			var fontStyle=$("#fontStyle").attr("value");
			$("h1").googleFont(fontStyle,"36px","4px 4px 4px #aaa");
		}
	</script>
  </head>
  <body onLoad="changeFont()">
    <h1>Making the Web Beautiful!</h1>
	<input type="text" id="fontStyle" value="Tangerine" />
	<input type="button" οnclick="changeFont()" value="changeFont" />
	<input type="button" οnclick="addShadow()" value="addTextShadow" />
  </body>
</html>

可用的Fonts可以从http://code.google.com/webfonts 查看。

Google Font Api还提供了粗体斜体的支持，使用的话就是在fontFamily后面加上冒号再加参数，这个版本的插件里暂时还没有支持。

需要注意的一点就是页面载入字体样式需要一小段时间，载入状态可以从状态栏里看到。

在ff 3.6.3和chrome 5.0.375.55下测试通过。