在zblog中加入调整文章字体大小功能

时间:2011-08-26 18:59:22

 一般来说,正文字体大小为12px是比较合适的,大都是网站的界面字体都是12px。

但为了适合不同人群的需要,大多数网站都有调节正文字体大小的功能,正文内容与周围内容合适大小比,更能突出页面内容的重点,增强用户体验。

在ZBLOG中我们可以JS变量调用的方法为文章内容增加调节字体大小功能:

第一步:登陆ZBLOG后台通过文件管理功能(或FTP),在根目录找到“/SCRIPT/common.js”文件,在该文件最后一行增加如下代码:

  1. function SetFont(num){var divs = document.getElementsByTagName("div");for (var i = 0; i < divs.length; i++)if(divs[i].className=="post-body")divs[i]['style']['fontSize']=num;}   

 

第二步:在主题目录中找到“TEMPLATE/b_article-single.html”,在标题或文章末端合适位置后面加入如下代码:

  1. 字体: <a href="javascript:SetFont('10px')"></a>-<a href="javascript:SetFont('12px')"></a>-<a href="javascript:SetFont('14px')"></a>   

 

第三步:修改完毕后,文件重建,OK。

说到文章字体,还有一个因素就是字体样式,如“font-family:Arial,Helvetica,sans-serif;”,一般来说,首选字体Arial是最合适阅读的,其次是备选字体“Helvetica,sans-serif”。

 

CSS字体定义:

字体名称属性(font-family),有多种字体可以选择,按顺序调用。如:font-family:Arial,宋体,Helvetica,sans-serif;

字体大小属性(font-size),字体大小的设置可以有多种方式,最常用的就是pt和px(pixel)。如:font-size:16pt

字体风格属性(font-style),这个属性有三个值可选:normal, italic, oblique,italic, oblique都是斜体显示。如:font-sytle:italic

字体颜色属性(color),可以选择颜色名称或颜色16进制代码,如:color:Red或color:FF0000

CSS段落定义:

段落首行缩进两字字符:text-indent:2em

上下行间隔距离,及行高:line-height:20px

 

本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行 (关于我

本文首发地址:https://www.huceo.com/post/269.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:42 | 浏览:7211

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

一定要支持
写的实在是太好了,一定要支持
小众博客2015-12-07 16:19:34回复评论
common.js
小众博客2015-12-07 16:19:34回复评论
写的实在是太好了,一定要支持
游客2015-01-26 13:37:15回复评论
<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_org.gif" alt="[互粉]" title="[互粉]" class="ds-smiley" /> <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_org.gif" alt="[给力]" title="[给力]" class="ds-smiley" />
游客2014-10-26 19:42:35回复评论
写的实在是太好了,一定要支持
宇天行2011-08-29 22:50:41回复评论
天天写好文章,不容易啊。。
宇天行2011-08-29 22:49:39回复评论
呵呵,是吗,喜欢就好。。
唐姆2011-09-02 13:30:40回复评论
J
宇天行2011-08-29 23:43:23回复评论
什么玩意??
宇天行2011-08-27 16:54:30回复评论
嗯,合适最好。。
wei2012-11-14 14:11:42回复评论
学习,不错!
fxj52572012-10-15 18:33:54回复评论
写的实在是太好了,一定要支持一下541859
ghjss2012-10-12 22:18:47回复评论
写的实在是太好了,抱淘虎酒店预订网baotaohu.com一定要支持一下!
ghjkkss2012-10-08 11:08:36回复评论
思路很好,楼主再接再厉,这个站爱搭爱理酒店预订网aidaaili.com有出更精彩的!522863
jass2012-10-07 16:07:37回复评论
路过看看串下门,写得不错www.gdcxbz.com谢谢分享531117
ghjkkss2012-10-06 21:12:07回复评论
路过看看,此站baotaohu.com学习了,谢谢分享!
dapingxiang2012-10-05 08:18:17回复评论
写的实在是太好了,一定要支持一下204965
建湖口碑网2012-09-29 18:31:20回复评论
路过看看 学习了,谢谢分享436594
东良2012-09-24 14:01:03回复评论
来此一游
ghjkkss2012-09-23 12:06:43回复评论
确实挺不错的户外游游分享文章,huwaiyouyou.com!
szcustoms.cn2012-08-28 15:44:39回复评论
看了这一篇文章,比看一周CCAV的心情还好。
上海做网站2012-06-24 13:27:48回复评论
谢谢分享,写的不错
算命2012-04-20 21:00:41回复评论
本人网站是用zblog做的,很适合留外链,欢迎做网站优化的大侠们留下链接,本人郑重承诺永不删除。
由 宇天行 于 2012-4-20 23:30:36 最后编辑
西凉茶2011-11-06 20:10:15回复评论
这个很值得一看 谢谢分享
cc霜2011-10-12 14:54:47回复评论
是这样的··吗··
百雀羚官网2011-08-31 22:59:23回复评论
呵呵 学习了 很好的博客 非常的吸引人
看看........
在线代理2011-08-29 21:02:38回复评论
今天没写好文章哦?
宇天行2011-08-29 22:50:41回复评论
天天写好文章,不容易啊。。
捷易通2011-08-29 13:53:51回复评论
继续关注楼主,不错!
小孙博客2011-08-29 13:15:35回复评论
我又来了。。哈哈。。你这主题。总感觉不错。。耳目一新丫。。
宇天行2011-08-29 22:49:39回复评论
呵呵,是吗,喜欢就好。。
指甲油2011-08-29 12:45:30回复评论
看到不错就回复了
BB霜2011-08-29 11:49:41回复评论
看看文章,觉得不错
文章读完后,觉得还是有一定的道理,被www.shwhjiaju.com收下了!!
来学习一下,好像在CSS里修改也可以。
学到了 很多
九江营销2011-08-27 19:45:13回复评论
这东西不错 呵呵
不错啊 我学习了
唐姆2011-09-02 13:30:40回复评论
J
过来看了一下。的确说得很有道理
瑶浴批发2011-08-27 16:46:23回复评论
又学到东西了
唐姆2011-08-27 00:30:26回复评论
码头发上了车
宇天行2011-08-29 23:43:23回复评论
什么玩意??
忆草2011-08-26 22:58:38回复评论
一般我都不喜欢太小的字体。
宇天行2011-08-27 16:54:30回复评论
嗯,合适最好。。