浏览 4498 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (7)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-05-23
前几天看到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下测试通过。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-05-26
楼主能截个图出来吗
|
| 返回顶楼 | |
|
发表时间：2010-05-26
何苦这样弄呢？本人认为能不用js搞定的东西就不用js
|
| 返回顶楼 | |
|
发表时间：2010-05-26
没有什么太大的意义吧,感觉,
|
| 返回顶楼 | |
|
发表时间：2010-05-27
这个好。。。以后字体效果就可以直接用了。。。娃哈哈～
|
| 返回顶楼 | |
|
发表时间：2010-05-27
不知道大家有没有去Google的字体库看，很多平时没有的字体，我觉得意义在于可以少用许多图片的美术字而直接用Google字体。
|
| 返回顶楼 | |
|
发表时间：2010-05-27
支持~~以后会用得上....
|
| 返回顶楼 | |
|
发表时间：2010-05-27
没中文字体 暂时不是很实用 加载这个js 也会影响速度吧？？还不如直接用图片来得省事~~~~
|
| 返回顶楼 | |
