Question

我希望能够改变网页中文本的大小，我想可以使用jQuery，但我没有javascript的经验。

另一个问题是网页是一个phtml文件，并且使用了多个php echo命令。该页面由多个phtml文件组成。

编辑：我想为用户提供3种不同字体大小的选择。

Answer 1

我将采用的方法是将字体大小百分比应用于html

的body标签

body
{
    font-size: 62.5%;
}

然后对于所有其他元素，在ems中指定font-size，这将生成大小作为继承字体大小的放大百分比

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

我在身体上使用62.5％，因为在指定其他字体大小时很容易将其转换为像素大小，例如1.2em = 12px，1.8em = 18px等等

然后以编程方式更改页面中的字体大小，您只需更改正文上字体大小的值，页面的其余部分将相应地向上或向下缩放

你可以通过三个div来测试这个

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

在JQuery中我相信你可以做到

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});

Answer 2

只需按CTRL- +和CTRL--调整字体大小（在Firefox中，在其他浏览器中可能会有所不同）

Answer 3

如何通过jquery增加和减少div内容的字体大小？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="data">

sghfhj jhkjik jhbjbjbh 
 </div>

 <div ><input type="button" value="increase" class="increaseFont"></input></div>
 <div><input type="button" value="decrease" class="decreaseFont"></input></div>

 <script type="text/javascript">
 $(document).ready(function(){
  $(".increaseFont,.decreaseFont").click(function(){
  var type=  $(this).val();
   var curFontSize = $('.data').css('font-size');
   alert(curFontSize);
   if(type=='increase'){
    $('.data').css('font-size', parseInt(curFontSize)+1);
    }
   else{
    $('.data').css('font-size', parseInt(curFontSize)-1);
   }
   alert($('.data').css('font-size'));

     });


 });
 </script>

这是有效的：）

Answer 4

我使用这个，字体awsome：

Fontsize: 
<div class="fa fa-search-plus" id="sizeUp"></div>
<div class="fa fa-search" id="normal"></div>
<div class="fa fa-search-minus" id="sizeDown"></div>

和脚本：

<script async type="text/javascript">
    $(document).ready(function() {
        $("#sizeUp").click(function(){
          var curFontSize = $('.ccm-page').css('font-size');
           $(".ccm-page").css("font-size",parseInt(curFontSize)+1);
         });

        $("#normal").click(function() {
            $(".ccm-page").css("font-size","15px");

        })

        $("#sizeDown").click(function() {
            var curFontSize = $('.ccm-page').css('font-size');
            $(".ccm-page").css("font-size",parseInt(curFontSize)-1);
        })
    });
  </script>

Answer 5

更改文字大小的最简单方法是使用css。如果您有权访问css文件，则可以使用以下命令更改页面上所有文本的大小：

* {
    font-size: 110%;
  }

将它添加到styles.css文件的顶部，它会影响页面上的所有文本以及使用styles.css文件的所有文本。

Answer 6

只需使用jQuery和HTML，您就可以添加一个选项来增加/减少文本的字体大小。您必须使用类kickblogger将内容包装在div中，并使用jQuery将该目标指向div以更改其字体大小。使用此脚本。

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script>

使用这些按钮。

<input type="button" id="btnkickplus" value="A +" />
<input type="button" id="btnkickminus" value="A -" />

：）

Answer 7

试试这个：

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p>
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p>
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>

允许用户更改网页中的字体大小

7 个答案: