代码之家 › 专栏 › 技术社区 › Tutu Kaeen

使用css/js缩放所有字体

scaling fonts twitter-bootstrap css javascript

-1

Tutu Kaeen · 技术社区 · 7 年前

我需要通过一次点击改变所有字体的大小(所以它是为有视力问题的人调整的)。下一次点击后,它应该会恢复正常。最简单的方法是什么?我不想访问所有的文本,因为它们太多了。我想按比例缩放大约20-50%。有没有简单的方法?我使用bootstrap和jQuery。

5 回复 | 直到 7 年前

1

××× × ×××× 7 年前

选择所有元素使用 $( "*" ) 并设置 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

1

anjuc 7 年前

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

3

0

404 Not Found 7 年前

这里有一个方法。你必须反复检查 containter 像这样的元素 p ul

$(".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

0

Ravi kant 7 年前

例如

<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');
}

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

5

0

K K 7 年前

使用缩放属性尝试此操作:

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>