2013-05-02 3 views
-3

내 웹 사이트에 글꼴 크기라는 메뉴가 있습니다. 기본적으로 사용자가 웹 사이트의 글꼴 크기를 변경할 수있는 옵션은 다음과 같습니다.웹 사이트의 글꼴 크기가 다른 경우

smaller 
small 
medium 
large 

기본 글꼴 크기는 "작음"입니다. 사용자가 "중간"글꼴 크기를 선택하면 글꼴 크기는 해당 웹 사이트의 모든 페이지를 방문하는 동안 (한 브라우저 세션에서) 중간 정도의 크기를 유지해야합니다. JavaScript 또는 jQuery 또는 기타를 통해이를 달성하는 방법.

선택시 글꼴 크기를 변경하려고 시도했지만 다른 페이지로 이동하면 글꼴 크기가 기본 글꼴 크기로 변경됩니다.

내 웹 사이트는 이미 HTML5, CSS3, JavaScript, Jquery를 사용하고 있습니다. 그것의 봄 MVC/Java에.

+0

최신 브라우저에서는 로컬 저장소를 사용합니다. 이전 IE와 같은 모든 브라우저를 지원하려면 쿠키를 사용하는 것이 좋습니다. –

+0

다른 페이지에서 글꼴 옵션을 유지하려면 쿠키를 사용하십시오. –

답변

1

, 당신은 몸의 글꼴 크기, 예를 들어,의 비율에 따라 페이지의 요소에 대한 모든 것

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

또는

h1{ font-size: 1.5em; } 

이 그때 당신은 단순히 당신의 몸 요소의 font-size을 변경할 수 있으며,이 후 자동적으로 페이지의 모든 글꼴을 업데이트, 설정이 있다면.

Baadshah가 제안한 것처럼 jQuery cookie plugin을 사용하면 모든 페이지에서 사용자 선택을 유지할 수 있습니다. 난 당신이 선택에 따라 몸의 글꼴 크기를 변경할 수 있습니다 jsfiddle

여기 함께 간단한 데모를 뒀다

는 쿠키를 설정 한 다음이 쿠키가 존재하는지 확인 후 글꼴 크기를 설정 .

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

쿠키를 사용

이상적인 세계에서는
var cookieFont = $.cookie("fontSize"); 
    $("#target").css("font-size", curFont + 'px'); 

DEMO

관련 문제