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

Question

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

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

РЕДАКТИРОВАТЬ: Я хотел бы дать пользователям 3 варианта для разных размеров шрифта.

Answer 1

Подход, который я выбрал бы, это применить процент размера шрифта к тегу body 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

<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

Я использую это со шрифтом 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>

Answer 3

Как увеличить и уменьшить размер шрифта содержимого 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 4

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

Answer 5

Просто с помощью 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 6

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

<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 7

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

* {
    font-size: 110%;
  }

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