允许用户更改网页中的字体大小 [英] Allow users to change font size in a webpage

问题描述

我希望能够更改网页中的文本大小，我想可以使用jQuery，但我没有javascript的经验。另一个问题是网页是一个phtml文件，并且使用多个php echo命令。该页面由多个phtml文件组成。

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

<我将采取的方法是对html的body标签应用一个font-size百分比

<$

p $ p> body
{
font-size：62.5％;
}


然后对于所有其他元素在ems中指定font-size作为继承的字体大小的按比例增加的比例

  h1 
 {
 font-size：1.8 em; 
} 
 
 p 
 {
 font-size：1.2em; 
} 
  

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

然后为了改变页面中的字体大小，你只需要改变font-size

您可以通过三个div

来测试这个

 < div id =sizeUp>较大的文字< / div> 
< div id =normal>正常文字< / div> 
< div id =sizeDown>较小的文字< / div> 
  

在JQuery我相信你可以做

  $（document）.ready（function（）{
 
 $（＃sizeUp）。 b $（body）。css（font-size，70％）; 
 
}）; 
 
 $ （function（）{
 
 $（body）。css（font-size，62.5％）; 
 
}）
 
 $（＃sizeDown）。click（function（）{
 
 $（body）。css（font-size，55％）; 
 
}）
}）; 
  

I would like to be able to change the size of text in a web page, I guess jQuery can be used, but I have no experience in javascript.

Another problem is that the webpage is a phtml file, and multiple php echo commands are used. And the page is made up of multiple phtml files.

EDIT: I would like to give users 3 choices for different font sizes.

解决方案

The approach I would take is to apply a font-size percentage to the body tag of the html

body
{
    font-size: 62.5%;
}

Then for all other elements specify font-size in ems, which generates the size as a scaled up percentage of the inherited font-size

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

I use 62.5% on the body because it is easy to translate this to pixel sizes when specifying other font sizes e.g. 1.2em = 12px, 1.8em = 18px and so on

To then change the font size in the page programatically you just need to change the value of the font-size on the body and the rest of the page will scale up or down accordingly

You can test this by having three divs

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

In JQuery I believe you can do

$(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%");

    })
});

这篇关于允许用户更改网页中的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！