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

jkfzero

浏览: 105116 次
性别:
来自: 北京

最近访客更多访客>>

zlr

htf120

birdcagelml

ptma

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端,openApi

Google jQuery CSS Ajax Chrome

前几天看到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下测试通过。

JQueryFont.rar.rar (820 Bytes)
下载次数: 143

分享到：

通过rpm方式安装Mysql | PHP中取得数组键

2010-05-23 12:42
浏览 1716
评论(7)
论坛回复 / 浏览 (7 / 4499)
分类:Web前端
查看更多

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

楼主能截个图出来吗

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论