给网站添加 大中小字体设置 和 打印功能

给文章添加大中小字体设置和打印功能,有利于提高网站的用户体验,倡萌最近在完成一个单子的过程中,偶然看到了实现方法,今天就一起来看看如何添加吧。

添加大中小字体设置

1.在</head>前添加下面的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//设置字体大小
<script type="text/javascript">
function SetFont(size)
{
	var divBody = document.getElementById("article_content");
	if(!divBody)
	{
	  	return;
	}
	divBody.style.fontSize = size + "px";
	var divChildBody = divBody.childNodes;
	for(var i = 0; i < divChildBody.length; i++)
	{
		if (divChildBody[i].nodeType==1)
		{
			divChildBody[i].style.fontSize = size + "px";
		}
	}
}
</script>

注意代码中的“article_content”是指文章内容所在的ID,比如:

1
2
3
4
5
<div id="article_content">
 
文章内容
 
</div>

请根据你自己主题的实际修改。

2.在文章页面模板要显示设置的地方(比如WordPress主题的single.php文件),添加下面的代码

1
2
3
<a href="javascript:SetFont(18)"></a>
<a href="javascript:SetFont(16)"></a>
<a href="javascript:SetFont(14)"></a>

SetFont( )中的数字就是字体的大小,请根据自己需要修改。

到这里,功能已经实现,剩下的就是通过css来设置 大中小 这三个字的显示方式了。

添加打印功能

1.在</head>前添加下面的js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function preview(oper)
{
	if (oper < 10) {
		bdhtml=window.document.body.innerHTML;//获取当前页的html代码
		sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
		eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
		prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
		prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
		window.document.body.innerHTML=prnhtml;
		window.print();
		window.document.body.innerHTML=bdhtml;
	} else {
		window.print();
	}
}
</script>

2.在文章页面模板要显示设置的地方(比如WordPress主题的single.php文件),添加下面的代码

1
<a href="javascript:preview(1)">打印</a>

3.使用类似下面的代码包含需要打印的内容

1
2
3
4
5
<!--startprint1-->
 
要打印的内容
 
<!--endprint1-->

注意:上面的代码 startprint1 的 1 是和上面第2步的 preview(1) 中的数字是对应的。

好了, 到这里打印功能已经添加好了。

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2012/12/11作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

6 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. Louis Han Louis Han说道:
    5#

    打印功能无所谓 这个字体设置功能还是不错的

  2. 老妖互联网博客 老妖互联网博客说道:
    4#

    我感觉用这个功能的人比较少。一般都是将就着看完,看完就关网页,除非小说站

  3. Tokin Tokin说道:
    3#

    很少点的应该,13或者14px应该足够了,太大影响美观,不知道排版会不会乱

  4. xiaomingtt xiaomingtt说道:
    2#

    直接用浏览器不就行了吗?

    • 胡倡萌 胡倡萌说道:

      有些访客并不知道如何使用浏览器放大字体的

  5. Musk Musk说道:
    1#

    js代码

扫一扫,用手机访问本站

扫一扫,用手机访问本站