实现正文内容字体可调整

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

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

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

加入一个ID,变成这样:

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

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

字体大小:小 
中  
大

这里就是用来控制那个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;
}

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

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

发表评论