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

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

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

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

ОТВЕТЫ

Ответ 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%");

    })
});

Ответ 2

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

* {
    font-size: 110%;
  }

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

С помощью этих кнопок.

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

:)

Ответ 6

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

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

Ответ 7

Попробуйте следующее:

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