不同字体大小的网站

Different font sizes on website

本文关键字：网站 字体      更新时间：2023-09-26

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

smaller
small
medium
large

默认字体大小为"small"。当用户选择字体大小为"中等"时，字体大小应该在用户访问该网站的所有页面时保持中等大小(在一个浏览器会话中)。如何通过JavaScript或jQuery或其他任何东西实现这一点。

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

我的网站已经使用HTML5, CSS3, JavaScript, Jquery。

在理想的情况下，你应该让页面上的所有元素基于body字体大小的百分比，例如

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

或

h1{ font-size: 1.5em; }

如果你已经设置了这个，那么你可以简单地改变你的body元素的font-size，然后这将自动更新页面上的所有字体。

正如Baadshah所建议的，你可以使用jQuery cookie插件在所有页面中持久化你的用户选择。

我在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')});
}

使用cookies 

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

相关文章：