用户自由调整文章字体大小

关于如何让用户自由调整文章字体大小的问题我研究了将近半个月之久。一开始的时候是在百度上找，虽然找到了很多的方法，但是无法都非常的复杂，我根本就不知道从何入手。然后也下载带有字体设置的一些大佬的 typecho 主题来研究，依然不得要领完全看不懂。也问过群里的一群大佬，他们众说纷纭，我听的是云里雾里。到底怎么才能实现呢？！

于是我又回到原点，继续在百度上搜索着，终于黄天不负有心人，今天终于找到了一个非常简单的实现方法，然后结合自身的主题进行了设置，终于搞定了，无比的开心！在这里第一时间分享给大伙，希望能对大家有所帮助

先放出未修改之前的源代码：

<html>
<head>
<title> 网页特效 - 文本特效 - 可控制字体大小的文本 </title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!-- 把下面代码加到 <head> 与 </head> 之间 -->
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
<!-- 把下面代码加到 <body> 与 </body> 之间 -->
<script type="text/javascript">
function FontZoom(fsize){var ctext=document.getElementById("arctext");
    ctext.style.fontSize=fsize +"px";
}
</script>
字体：[<a href="javascript:FontZoom(16)"> 大 </a>  <a href="javascript:FontZoom(14)"> 中 </a>  <a href="javascript:FontZoom(12)"> 小 </a>]<br><br>
<div id="arctext"> 欢迎光临 </div>
</body>
</html>

然后以下放出我结合自身的主题进行放置
首先我把 JS 部分放在了 footer.php 里面 </body> 之前。就是以下代码

<script type="text/javascript">
function FontZoom(fsize){var ctext=document.getElementById("arctext");
    ctext.style.fontSize=fsize +"px";
}
</script>

然后再把设置代码放在了 post.php 想要显示的地方。（根据不同主题放的位置不一样），就是以下代码

[<a href="javascript:FontZoom(16)"> 大 </a>  <a href="javascript:FontZoom(14)"> 中 </a>  <a href="javascript:FontZoom(12)"> 小 </a>]

然后我进行了简单的美化，加了一个字体的图标，效果见本站。
最后我把 <div id="arctext"> 和</div>分别放在 post.php 文章内容代码的前面和后面（由于我主题文章内容被我加了回复可见的代码，所以放的位置不一样，大家可根据自己的主题自行放置），就大功告成了！
大家也快来试试吧！

以上要感谢大佬保罗，就是本主题的原始作者的提示

用户自由调整文章字体大小

添加新评论取消回复