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

一尘不染

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

css

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

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

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

阅读 259

2020-05-16

共1个答案

一尘不染

我要采取的方法是将字体大小百分比应用于html的body标签

body
{
    font-size: 62.5%;
}

然后，对于所有其他元素，在ems中指定font-size，这将生成大小作为继承的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%");

    })
});

2020-05-16