Zmiana wielkości czcionki CSS przez użytkownika


(janusz_pro) #1

Witam

Czy zna ktoś sposób lub jakiego rozwiązania szukać by na stronie było do wyboru, trzy wielkości czcionek po kliknięciu żeby np. w jakiejś sekcji zmieniała się wielkość ?


(ziggurad) #2

Można to ograć np przez zmianę arkusza stylów na stronie. W jednym ogólnym pliku są najważniejsze rzeczy + w osobnym (wybieranym przez użytkownika) są określone rozmiary czcionek itp.

Możesz szukać czegoś w stylu:
https://www.thesitewizard.com/css/switch-alternate-css-styles.shtml


(krystian3w) #3

może takie coś z gotowców:

<html>
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        var currFFZoom = 1;
        var currIEZoom = 100;

        function plus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom += step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom += stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');

        };
        function minus(){
            //alert('sad');
                var step = 0.02;
                currFFZoom -= step;
                $('body').css('MozTransform','scale(' + currFFZoom + ')');
                var stepie = 2;
                currIEZoom -= stepie;
                $('body').css('zoom', ' ' + currIEZoom + '%');
        };
    </script>
    </head>
<body>
<!--zoom controls-->
                        <a id="minusBtn" onclick="minus()">-</a>
                        <a id="plusBtn" onclick="plus()">+</a>
  </body>
</html>

minusy:

:heavy_minus_sign: kod mało dobry (https://kornel.ski/pl/onclick),
:heavy_minus_sign:Zoom css zamiast ustawienia większego font-size (cała strona wygląda prawie jak przy Ctrl + +),
:heavy_minus_sign: na szybko nie da się mocniejszego powiększania.

W przykładzie użyłem jQuery 3.2.1


(janusz_pro) #4

Czyli raczej sam CSS tu nie wystarczy tylko trzeba jQuery? A nie da się na zasadzie tak jak czasami zmiana koloru po najechaniu myszką , to tu tak samo po kliknięciu np. font-size z small na medium


(krystian3w) #5

“Odklikniesz” i się cofnie.


Pewnie się da w czystym javascript.


Z pomocą cookies można też zachować ustawienia powiększenia / kontrastu np. https://www.oke.waw.pl.


(Fizyda) #6

Bez javascript tego nie osiągniesz. Za pomocą css dałoby się osiągnąć jedynie że gdy najedziesz na przycisk to czcionka się zwiększa, a gdy już zjedziesz z niego to czcionka wraca do domyślnej wartości.