实现正文内容字体可调整

2009年03月19日 - 12 条留言 - WordPress - 浏览:4,941 | 大小:小中大 | 繁體 | English | Short URL：http://bit.ly/bs968g

看到不少新闻系统的正文页面都可以调整字体的大小，其实一大部分是用JS来控制字体的CSS。这里我用我使用的这个主题的日志内容页来说明。

首先，我们看看文章页面模板 (single.php) ，

可以找到日志内容所在的DIV：

<div class="entry">	
    <?php the_content(); ?>
</div>

加入一个ID，变成这样：

<div class="entry" id="9npc">	
    <?php the_content(); ?>
</div>

插入这个ID的目的是为了方便用CSS控制字体样式的时候，指定这个ID。

接着我们在适当的位置，添加下面这个代码：

字体大小:<a href='javascript:document.getElementById("9npc").className="entry"; focus();'>小</a>&nbsp;
<a href='javascript:document.getElementById("9npc").className="f2"; focus();'>中 </a>&nbsp;
<a href='javascript:document.getElementById("9npc").className="f3"; focus();'>大</a>

这里就是用来控制那个div的样式的代码了。解释一下：

javascript:document.getElementById("9npc")

里的9npc就是对应着我们添加的那个ID。

className="entry";

里的entry就是对应CSS里的名字。

entry这个样式是这个主题本身就有的，所以我们只要在样式表 (style.css) 里添加2个新样式，我这里默认的日志内容字体大小是12px，所以我添加了2个，分别是14px和16px。这样三个css样式的代码如下：

.entry{
  line-height: 16px;
  clear: both;
  padding: 0 10px;
}
.f2 {
  font-size: 14px;
  line-height: 14pt;
  clear:both;
  padding: 0 10px;}
.f3 {
  font-size: 16px;
  line-height: 16pt;
  clear:both;
  padding: 0 10px;
}

这样就大功告成了。呵呵。

代码主要是参考了巴哈姆特的新闻内容页。

标签： CSS, html, WordPress

分享到：

本文作者：施炜煜
原文链接：http://firefore.com/2009/03/css-control-fonts.html
发布于：2009年03月19号最后修订在：2010年06月24号
版权声明:转载时请以超链接形式标明文章原始出处和作者信息。

相关日志随机文章最新文章留言排行

读过这篇日志的读者同时也读了：

>欢迎您的来访。喜欢这篇文章么? 发表一下您的看法好让我们能交流交流一下。
>建议您订阅这里的RSS，这样您及时地获取更多精彩内容!
>Permalink：http://firefore.com/2009/03/css-control-fonts.html
>Trackback Address：http://firefore.com/2009/03/css-control-fonts.html/trackback

12 Responses to “实现正文内容字体可调整”

1. 虫儿 | 2009年03月19号 at 19:54 | #

这个功能相当不错
回复该留言
2. SunQ | 2009年03月19号 at 20:19 | #

看不懂……
回复该留言
3. cluries | 2009年03月19号 at 22:26 | #

呵呵,典型的JS控制CSS
回复该留言
4. 小桥流水人家 | 2009年03月20号 at 13:16 | #

倒~又一编程高手…
回复该留言
- 5. 减肥食谱 | 2009年03月21号 at 10:24 | #
  
  呵呵，现在编程高手贼多，咋两的好好学习了~~
  回复该留言
6. Dianso | 2009年03月21号 at 12:55 | #

看不懂啊。
回复该留言
7. 3d | 2009年03月21号 at 13:40 | #

好啊，呵呵
回复该留言
8. 动漫驿站 | 2009年03月21号 at 19:51 | #

这个好啊！
回复该留言
9. 动漫驿站 | 2009年03月24号 at 08:34 | #

不错学习了
回复该留言
10. 炜煜 | 2009年03月24号 at 10:47 | #

看来这个有帮到大家。呵呵。
回复该留言
11. 蓝天博客 | 2009年03月24号 at 14:28 | #

这个比较实用。一般正文字体都是默认的，特别是字体颜色得修改代码实现，比较麻烦。
回复该留言
- 12. 炜煜 | 2009年04月14号 at 15:48 | #
  
  呵，现在很多CMS都有这种可选择文章字体大小的功能。
  回复该留言