フォントサイズを切り替えるボタンをjQueryだけで簡単に実装

色々な方法があるっぽいけど自分はいつもこれ

HTML

<span class="font-m" style="font-size: 100%;">A</span>
<span class="font-l" style="font-size: 120%;">A</span>
<span class="font-x" style="font-size: 140%;">A</span>

jQuery

$(function(){
    $(".font-m").click(function(){
        $('body').css({'font-size':'100%'});
    });
    $(".font-l").click(function(){
        $('body').css({'font-size':'120%'});
    });
    $(".font-x").click(function(){
        $('body').css({'font-size':'140%'});
    });
});

HTML側はfontawesome使えば滑らかなボタン作れるので本番ではそうしてます。
欠点としてはページ遷移すると元に戻るので、遷移してもサイズを保ちたいならcookieあたりに設定放り込めばいいと思う。

デザイン HTML ｊQuery