Question

我的网站有一个名为字体大小的菜单。基本上它是用户更改网站字体大小的选项，如：

smaller
small
medium
large

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

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

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

Answer 1

使用cookies

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

DEMO

Answer 2

在理想的世界中，您可以根据正文字体大小的百分比来覆盖页面上的所有元素，例如：

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

或

h1{ font-size: 1.5em; }

如果你有这个设置，那么你只需更改你的身体元素的font-size，然后这将自动更新页面上的所有字体。

正如Baadshah建议的那样，您可以使用jQuery cookie plugin在所有网页上保留用户选择权。

我在jsfiddle

处放了一个简单的演示

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

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

网站上不同的字体大小

2 个答案: