网络代码

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

老狮博主

2019-08-20

1 评论

1,934 阅读

493 个字

百度已收录

08/20

本文最后更新于2020年01月19日，已超过893天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！

关于如何让用户自由调整文章字体大小的问题我研究了将近半个月之久。一开始的时候是在百度上找，虽然找到了很多的方法，但是无法都非常的复杂，我根本就不知道从何入手。然后也下载带有字体设置的一些大佬的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文章内容代码的前面和后面（由于我主题文章内容被我加了回复可见的代码，所以放的位置不一样，大家可根据自己的主题自行放置），就大功告成了！
大家也快来试试吧！

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

Typecho 美化代码

朗读