`
jkfzero
  • 浏览: 102616 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

GooglejQueryCSSAjaxChrome
阅读更多

前几天看到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" onclick="changeFont()" value="changeFont" />
	<input type="button" onclick="addShadow()" value="addTextShadow" />
  </body>
</html>

 

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

 

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

 

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

 

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

分享到：
| PHP中取得数组键
评论
7 楼 拜月小刀 2010-05-27  
没中文字体  暂时不是很实用  加载这个js  也会影响速度吧？？还不如直接用图片来得省事~~~~
6 楼 junlas 2010-05-27  
支持~~以后会用得上....
5 楼 jkfzero 2010-05-27  
不知道大家有没有去Google的字体库看，很多平时没有的字体，我觉得意义在于可以少用许多图片的美术字而直接用Google字体。
4 楼 ghyghoo8 2010-05-27  
这个好。。。以后字体效果就可以直接用了。。。娃哈哈～
3 楼 elvishehai 2010-05-26  
没有什么太大的意义吧,感觉,
2 楼 satanest 2010-05-26  
何苦这样弄呢？本人认为能不用js搞定的东西就不用js
1 楼 mybreeze77 2010-05-26  
楼主能截个图出来吗
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics