使用 css/js 缩放所有字体答案

【问题标题】：Scale all fonts with css/js使用 css/js 缩放所有字体
【发布时间】：2018-09-03 14:35:28
【问题描述】：

我需要一键更改所有字体的大小（因此针对有视力问题的人进行了调整）。下次单击后，它应该恢复正常。最简单的方法是什么？我不想访问每一个文本，因为它们有很多。我想将所有规模扩大大约 20-50%。有没有简单的方法可以做到这一点？我使用引导程序和 jQuery。

【问题讨论】：

到目前为止你有什么尝试？
对字体大小使用相对单位，即。 rem 或 em。在整个 CSS 中使用相同的单位。当您需要缩放大小时，只需增加正文的字体大小。由于相对单位，其他元素的字体大小也会增加。或者如何使用 Javascript 增加 body 的缩放级别？

标签： javascript css twitter-bootstrap fonts scaling

【解决方案1】：

选择所有元素使用$( "*" )，设置font-size使用.css( "font-size", "25px" )

var flag=true;
function changeSize(){
if(flag)
{
   $( "*" ).css( "font-size", "50px");
   flag=false;
   }
 else{
 
  $( "*" ).css( "font-size", "15px");
  flag=true;
  }
}

*{
font-size:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
<button onclick="changeSize()">change size</button>

【讨论】：

【解决方案2】：

选择所有元素并按您想要的数量缩放它们的字体大小。

$("*").each(function(index) {
  var size = $( this ).css("font-size");
  $( this ).css("font-size", parseInt(size)*YOUR_FACTOR);
});

您也可以通过保留一个用于切换的变量来反转这一点。

【讨论】：

我喜欢简洁，但我必须添加解析字体大小。 24px*3 是 NaN。但是通过解析它可以工作。它有时会因长数字而崩溃，例如 2.83333333，我必须弄清楚
我找不到你。您想将所有字体大小更改为唯一大小或当前大小的某个因素吗？
变成一个因素，这样就可以了，我只需要修改它
Tutu Kaeen，您可以使用parseInt() 方法来避免长数字和浮点数。
我用parseInt()编辑了代码。谢谢@KhyatiAgolaChandak

【解决方案3】：

这是一种方法。您必须在 p ul 之类的元素上迭代您的 containter 任何您想要增加字体的元素。

$(".action-btn").on("click", function() {
        var action = $(this).attr('data-value');
        var elements = $("#section").find("p, ul,ol");
        var fontSizeToIncreasedOrDecreased = 2;
        fontChange(elements,fontSizeToIncreasedOrDecreased,action)
    });
  
function fontChange(elements,fontSizeToIncreasedOrDecreased,action) {
    $(elements).each(function() {
        var c = $(this);
        if(action == 'in'){
        c.css("font-size", parseInt(c.css("font-size")) + fontSizeToIncreasedOrDecreased)
        }else{
        c.css("font-size", parseInt(c.css("font-size")) - fontSizeToIncreasedOrDecreased)
        
        
        }
        
        
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section">

  <P> Lorem ipsum text ... </p>
 <ul>
 <li>hello 1 </li>
 </ul>
<input type="button" class="action-btn" value="Zoom In" data-value="in" id="btn" />
<input type="button" class="action-btn" value="Zoom Out" data-value="out" id="zoomOut" />
</section>

【讨论】：

【解决方案4】：

最好在点击 javascript 时切换 css 类。

例如

HTML

<div class="original-font">
  <!-- any element-->
</div>

css

.original-font.large-font {
   font-size: calc('your original font' + '% how much you want to increase or decrease');
}

Js

$(".original-font").click(function() {
  $(".original-font").toggleClass('larger-font');
});

【讨论】：

【解决方案5】：

使用缩放属性试试这个：

html,
body {
  zoom: 1;
  font-size: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeSize('up')">+ size (using zoom)</button>
<button onclick="changeSize('down')">- size(using zoom)</button>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

<script>
  function changeSize(param) {
    var zoom = 0.1
    if (param == "up") {
      $("body").css("zoom", '+=' + zoom);
    } else {
      $("body").css("zoom", '-=' + zoom);
    }
  }

</script>

【讨论】：