Позвольте пользователям изменить размер шрифта на веб-странице

Question

Я хотел был бы иметь возможность изменить размер текста на веб-странице, я думаю, что jQuery можно использовать, но у меня нет опыта работы с javascript.

Другая проблема заключается в том, что веб-страница представляет собой файл phtml, и используются несколько команд эхо-кода php. И страница состоит из нескольких файлов phtml.

EDIT: Я хотел бы дать пользователям 3 варианта для разных размеров шрифта.

Answer 1

Подход, который я бы это применить процент размера шрифта для тега тела HTML

body 
{ 
    font-size: 62.5%; 
} 

Тогда для всех остальных элементов указать размер шрифта в Ems, который генерирует размер как масштабируется до процента от унаследованного размера шрифта

h1 
{ 
    font-size: 1.8em; 
} 

p 
{ 
    font-size: 1.2em; 
} 

Я использую 62,5% по сравнению с телом, потому что легко перевести это размер пикселя при указании другого размеры шрифта, например, 1.2em = 12px, 1.8em = 18px и т. Д.

Чтобы затем изменить размер шрифта на странице, вам просто нужно изменить значение размера шрифта на теле, а остальная часть страницы будет масштабироваться или вниз соответственно

вы можете проверить это, имея по три дивы

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

    }) 
}); 

Answer 2

Самый простой способ изменить размер текста ш с. Если у вас есть доступ к файлу CSS, вы можете изменить размер всего текста на странице с этим:

* { 
    font-size: 110%; 
    } 

Добавьте его в верхней части файла styles.css, это влияет на весь текст на странице, и весь текст, который использует файл styles.css.

Answer 3

Попробуйте это:

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p> 

Answer 4

Просто изменить размер шрифта по ctrl- + и CTRL-- (в Firefox, может отличаться в других браузерах)

Answer 5

Как увеличить и уменьшить размер шрифта DIV содержимое через jquery?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<div class="data"> 

sghfhj jhkjik jhbjbjbh 
</div> 

<div ><input type="button" value="increase" class="increaseFont"></input></div> 
<div><input type="button" value="decrease" class="decreaseFont"></input></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".increaseFont,.decreaseFont").click(function(){ 
    var type= $(this).val(); 
    var curFontSize = $('.data').css('font-size'); 
    alert(curFontSize); 
    if(type=='increase'){ 
    $('.data').css('font-size', parseInt(curFontSize)+1); 
    } 
    else{ 
    $('.data').css('font-size', parseInt(curFontSize)-1); 
    } 
    alert($('.data').css('font-size')); 

    }); 


}); 
</script> 

это работает :)

Answer 6

Просто с JQuery и HTML вы можете добавить опцию, чтобы увеличить/уменьшить размер шрифта текста. Вы должны обернуть содержимое в div с классом kickblogger и настроить этот div, чтобы изменить его размер шрифта с помощью jQuery. Используйте этот скрипт.

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script> 

С этими кнопками.

<input type="button" id="btnkickplus" value="A +" /> 
<input type="button" id="btnkickminus" value="A -" /> 

• Демо - http://jsfiddle.net/3N4Lf/
• Статья - http://www.howtokickblogger.com/2013/09/change-text-font-size-on-blogger-using-jquery.html

:)

Answer 7

Я использую это, с шрифтом AWSOME:

Fontsize: 
<div class="fa fa-search-plus" id="sizeUp"></div> 
<div class="fa fa-search" id="normal"></div> 
<div class="fa fa-search-minus" id="sizeDown"></div> 

и сценарий:

<script async type="text/javascript"> 
    $(document).ready(function() { 
     $("#sizeUp").click(function(){ 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)+1); 
     }); 

     $("#normal").click(function() { 
      $(".ccm-page").css("font-size","15px"); 

     }) 

     $("#sizeDown").click(function() { 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)-1); 
     }) 
    }); 
    </script>