整个html文档如何轻松更改字体大小

Question

整个html文档如何轻松更改字体大小

5

是否有一种标准方法可以更改整个HTML文档的字体大小？

我想设计两个按钮，一个增大字体大小，另一个减小字体大小。这两个按钮都会调用JavaScript函数；

function increaseFontSize(){
//Increase the font size for the whole document
}

function decreaseFontSize(){
//Decrease the font size for the whole document
}

问题

我应该如何做？除了我上面提到的方法，还有更简单的方法吗？

编辑

我正在使用Bootstrap，它为每个HTML元素提供自己的CSS。Bootstrap将默认（body）字体大小定义为14px。

- Marcus

也许可以尝试更改<html>元素或/和<body>元素的font-size CSS样式属性，以确保没有其他元素覆盖此属性？ - albciff

这取决于页面上字体大小的设置。 - Jukka K. Korpela

1

@ahmad - 一次无效的编辑 - 你怎么知道正在使用jQuery？ - Lix

这种情况下正在使用Bootstrap，并且可以使用Jquery。@Danko - Marcus

@LcSalazar 比使用JavaScript建议的方法更简单 - Marcus

显示剩余2条评论

2个回答

2

一种方法是在CSS中使用em单位，如果您使用Jquery，则可以使用此解决方案。

您可以在body上设置全局值，然后更改该值：

$(document).ready(function(){
    var fontSize = parseInt($('body').css('font-size'),10);
    $('.inc').on('click',function(){
        fontSize+=0.5;
        $('body').css('font-size',fontSize+'px');
    })
    $('.dec').on('click',function(){
        fontSize-=0.5;
        $('body').css('font-size',fontSize+'px');
    })
})

body {
    font-size:12px;
    padding-top:20px;
}
.tit {
    font-size:3em;
}
.sub {
    font-size:2em;
}
.cont {
    font-size:1em;
}
.button {
    position:absolute;
    top:0;
    font-size:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tit">Main Title</div>
<div class="sub">Subtitle</div>
<div class="cont">Contents</div>
<div class="button">
    <a class="inc" href="#">Increase</a>
    <a class="dec" href="#">Decrease</a>
</div>

- DaniP

好的回答，如果body元素在样式中没有font-size属性，则无法工作？ - Aditya

@Aditya会正常工作，因为字体大小有一个默认值...而你仍然可以从jQuery变量中获取它。 - DaniP

这看起来非常不错。但是，我正在使用bootstrap（请查看我的编辑），而bootstraps默认正文字体大小为14px。此外，bootstrap定义了每个HTML元素的某些默认字体大小值，也是以像素为单位的。这将如何影响此解决方案？ - Marcus

@Marcus 在这里什么也没有检查 http://www.bootply.com/P01ZSeZzsC ... 问题是 Bootstrap 中的一些元素具有固定的字体大小，您需要覆盖这些样式并使用 em 但您可以尝试。 - DaniP

虽然我很感谢你的努力，但这种方法会让我不得不覆盖每个我想要增加/减少字体大小值的元素。目前为止，@Lix的答案看起来更干净，我会先尝试它。 - Marcus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lix · Accepted Answer

您需要定位 HTML 元素的 font-size 样式。您必须确保存在初始值，以便您可以轻松地修改它。

您可以按照以下方式进行操作：

document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "10px"

所有需要做的就是实现值的增量：

function increaseFontSize(){
    var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
    var int_value = parseInt( existing_size.replace( "px", "" );
    int_value += 10;
    document.getElementsByTagName( "html" )[0].style[ "font-size" ] = int_value + "px";
}

我建议使用一些辅助函数来简化这段代码：

function extract_current_size(){
  var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
  return parseInt( existing_size.replace( "px", "" );
}

function increaseFontSize(){
  var existing_value = extract_current_size()
  existing_value += 10;
  document.getElementsByTagName( "html" )[0].style[ "font-size" ] = existing_value + "px";
}