Javascript 网站上的不同字体大小

我的网站有一个名为“字体大小”的菜单。基本上，用户可以选择更改网站的字体大小，如：

smaller
small
medium
large

默认字体大小为“小”。当用户选择字体大小（如“中等”）时，在用户访问该网站的所有页面期间（在一个浏览器会话中），字体大小应保持中等。如何通过JavaScript、jQuery或其他任何方式实现这一点

我尝试在选择时更改字体大小，但当我转到另一页时，字体大小更改为默认字体大小

if ( $.cookie('font-size') ){
    console.log($.cookie('font-size')); // take this out when not debugging
    $('body').css({ 'font-size': $.cookie('font-size')});
}

我的网站已经在使用HTML5、CSS3、JavaScript和Jquery。它位于Spring MVC/Java上。

使用cookies

 var cookieFont = $.cookie("fontSize");
  $("#target").css("font-size", curFont + 'px');

---

在理想情况下，页面上的所有元素都是基于正文字体大小的百分比，例如

body{ font-size: 12px; }
h1{ font-size: 120%; }

或

如果设置了此选项，则只需更改body元素的

字体大小

，即可自动更新页面上的所有字体

正如Baadshah所建议的，您可以使用在所有页面上持久化您的用户选择

我在这里制作了一个简单的演示

您可以根据选择更改正文字体大小，设置cookie，然后检查此cookie是否存在，然后设置字体大小

if ( $.cookie('font-size') ){
    console.log($.cookie('font-size')); // take this out when not debugging
    $('body').css({ 'font-size': $.cookie('font-size')});
}

---

在现代浏览器上，使用本地存储。为了支持所有浏览器（如旧IE），考虑使用Cookie。使用Cookie在其他页面中保存字体选项。