i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت متفاوت و کاملتر خواهد بود، این فرآیند زمانبر است و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی نمایش و به تناوب به روزرسانی می شود.
آگهی
article

کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت

javascript-font-resize

از جمله قابلیت های جاوا اسکریپت (JavaScript) در صفحات وب کنترل و تغییر مقادیر ویژگی های به کار رفته در کدنویسی HTML است که بعضا لزوم کاربرد این زبان در این زمینه ها کاملا محسوس به نظر می رسد، به طور مثال اگر بخواهیم به کاربران خود امکان تغییر رنگ پس زمینه سایت یا وبلاگمان را بدهیم یا به آن دسته از کاربرانی که ممکن است مشاهده فونت مطالب با اندازه معمول برایشان سخت باشد قابلیت تغییر اندازه فونت صفحه را بدهیم، بهترین گزینه انتخاب جاوا اسکریپت برای انجام این موارد است چرا که با متدهای ساده و چند خط کدنویسی در عین کم حجم بودن کلیت کار قابلیت سازگاری با مرورگرهای مختلف نیز به خوبی وجود دارد، با ذکر این مقدمه در این مطلب می خواهیم ببینیم چگونه می توانیم با این زبان اسکریپت نویسی قابلیتی ایجاد کنیم که به کمک آن کاربران بتوانند به راحتی مطالب را با اندازه مورد نظر خود مشاهده کنند.

کنترل و تغییر انداز فونت در تگ p و div با جاوا اسکریپت


ساده ترین راه برای کنترل و تغییر اندازه فونت مطالب و محتوای صفحه استفاده از متد style.fontSize است، بدین منظور در کد زیر سه تابع تعریف شده است که هر کدام به ترتیب اندازه فونت را افزایش، کاهش و یا آن را به حالت پیش فرض تبدیل می کنند، در این توابع از تگ p (پاراگراف) به عنوان تگ مقصد استفاده شده (مطابق با نیاز خود می توانیم p را با مقادیر دیگر مانند div یا آی دی خاصی جایگزین کنیم)، برای استفاده از این کد ابتدا اسکریپت زیر را بین تگ head کپی می کنیم:
<script>
var minsize = 8;
var maxsize = 18;
function increaseFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != maxsize){
            s += 1;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}

function decreaseFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != minsize){
            s -= 1;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}

function defultFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != 12){
            s = 12;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}
</script>
سپس در هر قسمت از محتوای خود که تمایل داشتیم توابع کنترل و تغییر اندازه فونت را با درج لینک های زیر فراخوانی می کنیم:
<a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a>
<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a>
<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
برای دیدن پیش نمایش آنلاین و بررسی توابع لطفا به انتهای همین مطلب مراجعه کنید.
توضیح:
- کد بالا در تابع increaseFontSize با عنصر document.getElementsByTagName مقدار فعلی اندازه تگ های p صفحه را (به پیکسل) دریافت کرده و در حلقه for مقادیر را یک واحد افزایش می دهد.
- همین فرآیند در تابع decreaseFontSize نیز انجام می شود با این تفاوت که مقدار در این تابع در حلقه for یک واحد کاهش می یابد.
- در تابع defultFontSize اندازه فونت پیش فرض به صورت 12 پیکسل تنظیم می شود که این مقدار با توجه به اندازه فونت پیش فرض صفحه می تواند بیشتر از 8 یا کمتر از 18 پیکسل باشد.
- همان طور که مشخص است این روش با پیکسل تنظیم شده است و مقادیر دیگر مانند em را تغییر نمی دهد (برای تغییر این موارد باید کل قسمت های مربوط به px را با em و به درستی جایگزین کنیم).

کنترل و تغییر انداز فونت در تگ body با جاوا اسکریپت


با روش بالا تغییر اندازه فونت به صورت پیکسل و بر روی پاراگراف یا بلاک هایی مانند div قابل اعمال است، اما با کد زیر می توانیم کنترل و تغییر اندازه فونت صفحه را بر روی تمام عناصر موجود در تگ body انجام دهیم، بدین منظور ابتدا کد جاوا اسکریپتی زیر را در قسمت head صفحه درج می کنیم:
function resizeText(value){
    var body_font_size = document.body.style.fontSize;
    
    if(body_font_size == ''){
        body_font_size = '0.75em';
    }
    
    if(value == 0){
        document.body.style.fontSize = '0.75em';
    } else{
        document.body.style.fontSize = parseFloat(body_font_size) + (value * 0.2) + 'em';
    }
}
</script>
سپس تابع را به صورت لینک متنی یا در نظر گرفتن دکمه (Button) و رویداد onclick فراخوانی می کنیم:
<a href="javascript:resizeText(-1);">کاهش اندازه فونت</a>
<a href="javascript:resizeText(1);">افزایش اندازه فونت</a>
<a href="javascript:resizeText(0);">اندازه فونت پیش فرض</a>
<br><br>
<button type="button" onclick="resizeText(-1);">کاهش اندازه فونت</button>
<button type="button" onclick="resizeText(1);">افزایش اندازه فونت</button>
<button type="button" onclick="resizeText(0);">اندازه فونت پیش فرض</button>
برای دیدن پیش نمایش آنلاین و بررسی تابع لطفا به انتهای همین مطلب مراجعه کنید.
توضیح:
- در این کد از متد body.style.fontSize استفاده کرده ایم تا مقادیر اندازه فونت را به تگ body در صفحه وب نسبت دهیم.
- این کد بر اساس مقداردهی em اندازه فونت را تغییر می دهد و مقادیر پیش فرض به صورت 0.75em در نظر گرفته شده است که در واقع همان 12 پیکسل است (با توجه به اینکه مقدار em وابسته به بلاک والد است در اغلب موارد هر em برابر با 16 پیکسل است و 12 تقسیم بر 16 می شود 0.75em، در اینجا عدد 16 اندازه پیش فرض فونت در مرورگرها است که ممکن است در همه موارد به یک صورت نباشد).
- ساختار تابع روشن و ساده است، در قسمت دستور شرطی if اول، اندازه فونت پیش فرض با متد document.body.style.fontSize برابر با 0.75em تعیین می شود و در دستور شرطی if دوم، مقادیر برای گزینه پیش فرض (زمانی که آرگیومنت value به صورت 0 مقداردهی می شود) در نظر گرفته شده و نهایتا در قسمت else آخر، به صورت داینامیک مقدار فونت با هر کلیک کاربر کاهش یا افزایش می یابد.

کنترل و تغییر اندازه هوشمند فونت با جاوا اسکریپت


اگرچه روش هایی که در این آموزش گفتیم کاملا مناسب و کاربردی هستند اما می توانیم از جاوا اسکریپت به صورت هوشمندانه تری نیز استفاده کنیم، به طور مثال در شیوه معمول اگر کاربر فونت مطالب را متناسب با سلیقه خود تنظیم کرده و از صفحه ای به صفحه ی دیگر پیمایش کند تنظیمات اعمال شده به حالت پیش فرض برگردند و ناچار است مجددا فونت را به اندازه مطلوب خود تغییر دهد، برای رفع این مشکل راه حل متداول و کاربردی استفاده از کوکی (Cookie) و ذخیره تنظیمات در مرورگر است تا سفارشی سازی قبلی کاربر در حافظه سیستم نگهداری شود، بدین منظور ابتدا کد زیر را در قسمت head صفحه (بعد از استایل های CSS) کپی می کنیم:
<script>
function setFontSizeCookie(name, value, days){
    if(days){
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 *1000));
        var expires = '; expires=' + date.toGMTString();
    } else{
        var expires = '';
    }
    
    document.cookie = name + '=' + value+expires + '; path=/';
}

function getFontSizeCookie(name){
    var name_eq = name + '=';
    var ca = document.cookie.split(';');
    
    for(var i=0; i < ca.length; i++){
        var c = ca[i];
        
        while(c.charAt(0) == ' '){
            c = c.substring(1, c.length);
        }
        
        if(c.indexOf(name_eq) == 0){
            return c.substring(name_eq.length, c.length);
        }
    }
    
    return null;
}

if(getFontSizeCookie("page_font_size") != null){
    document.write('<style>');
    document.write('body{');
    document.write('font-size:' + getFontSizeCookie("page_font_size") + 'em');
    document.write('}');
    document.write('</style>')
} else{
    document.write('<style>');
    document.write('body{');
    document.write('font-size: 0.75em');
    document.write('}');
    document.write('</style>')
}
</script>
سپس برای فراخوانی توابع و تنظیم کوکی می توانیم از نمونه لینک های زیر استفاده کنیم:
<a href="#" onclick="javascript:body.style.fontSize='0.65em'; setFontSizeCookie('page_font_size', '0.5', 30);">اندازه فونت کوچک</a>
<a href="#" onclick="javascript:body.style.fontSize='1em'; setFontSizeCookie('page_font_size', '1', 30);">اندازه فونت بزرگ</a>
<a href="#" onclick="javascript:body.style.fontSize='0.75em'; setFontSizeCookie('page_font_size', '0.75', 30);">اندازه فونت حالت پیش فرض</a>
توضیح:
- این کد نیز فونت کل صفحه را با استفاده از تگ body تغییر می دهد و از معیار em در آن استفاده شده است.
- در حالت پیش فرض تا 30 روز تنظیمات کاربران در حافظه مرورگر آنها به صورت کوکی نگهداری می شود و اگر کاربر صفحه را رفرش کند یا پس از چند روز مجددا به سایت یا وبلاگمان مراجعه نماید آخرین اندازه انتخابی از طریق کوکی دریافت شده و فونت به همان صورت نمایش داده می شود.
- مقادیر در نظر گرفته شده برای اندازه فونت در حالت های فونت کوچک، پیش فرض و بزرگ دلخواه است و اگر با کدنویسی جاوا اسکریپت آشنا باشیم به راحتی قابل سفارشی سازی است.
- دقت کنیم رویداد استفاده شده در اسکریپت های بالا onclick (پس از کلیک کاربر) است که می توانیم از رویدادهای دیگر جاوا اسکریپت (به فرض onload) نیز در موارد خاص و مورد نیاز استفاده کنیم.

پیش نمایش آنلاین کدهای تغییر دهنده اندازه فونت صفحه


تمام کدها و روش های گفته شده را به صورت یک مجموعه جهت تست در نمونه صفحه زیر قرار داده ایم که می توانیم با استفاده از لینک درج شده در انتهای آموزش پیش نمایش آنلاین را مشاهده و بررسی کنیم:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تغییر اندازه فونت با جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
}
</style>
<script>
var minsize = 8;
var maxsize = 18;
function increaseFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != maxsize){
            s += 1;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}

function decreaseFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != minsize){
            s -= 1;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}

function defultFontSize(){
    var p = document.getElementsByTagName('p');
    
    for(i = 0; i < p.length; i++){
        if(p[i].style.fontSize){
            var s = parseInt(p[i].style.fontSize.replace('px', ''));
        } else{
            var s = 12;
        }
        
        if(s != 12){
            s = 12;
        }
        
        p[i].style.fontSize = s + 'px';
    }
}
</script>
<script>
function resizeText(value){
    var body_font_size = document.body.style.fontSize;
    
    if(body_font_size == ''){
        body_font_size = '0.75em';
    }
    
    if(value == 0){
        document.body.style.fontSize = '0.75em';
    } else{
        document.body.style.fontSize = parseFloat(body_font_size) + (value * 0.2) + 'em';
    }
}
</script>
<script>
function setFontSizeCookie(name, value, days){
    if(days){
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 *1000));
        var expires = '; expires=' + date.toGMTString();
    } else{
        var expires = '';
    }
    
    document.cookie = name + '=' + value+expires + '; path=/';
}

function getFontSizeCookie(name){
    var name_eq = name + '=';
    var ca = document.cookie.split(';');
    
    for(var i=0; i < ca.length; i++){
        var c = ca[i];
        
        while(c.charAt(0) == ' '){
            c = c.substring(1, c.length);
        }
        
        if(c.indexOf(name_eq) == 0){
            return c.substring(name_eq.length, c.length);
        }
    }
    
    return null;
}

if(getFontSizeCookie("page_font_size") != null){
    document.write('<style>');
    document.write('body{');
    document.write('font-size:' + getFontSizeCookie("page_font_size") + 'em');
    document.write('}');
    document.write('</style>')
} else{
    document.write('<style>');
    document.write('body{');
    document.write('font-size: 0.75em');
    document.write('}');
    document.write('</style>')
}
</script>
</head>
<body>
تغییر اندازه فونت - روش اول:<br>
<a href="javascript:decreaseFontSize();">کاهش اندازه فونت</a> |
<a href="javascript:increaseFontSize();">افزایش اندازه فونت</a> |
<a href="javascript:defultFontSize();">اندازه فونت پیش فرض</a>
<hr>
تغییر اندازه فونت - روش دوم:<br>
<a href="javascript:resizeText(-1);">کاهش اندازه فونت</a> |
<a href="javascript:resizeText(1);">افزایش اندازه فونت</a> |
<a href="javascript:resizeText(0);">اندازه فونت پیش فرض</a>
<br><br>
<button type="button" onclick="resizeText(-1);">کاهش اندازه فونت</button>
<button type="button" onclick="resizeText(1);">افزایش اندازه فونت</button>
<button type="button" onclick="resizeText(0);">اندازه فونت پیش فرض</button>
<hr>
تغییر اندازه فونت - روش سوم:<br>
<a href="#" onclick="javascript:body.style.fontSize='0.65em'; setFontSizeCookie('page_font_size', '0.5', 30);">اندازه فونت کوچک</a> |
<a href="#" onclick="javascript:body.style.fontSize='1em'; setFontSizeCookie('page_font_size', '1', 30);">اندازه فونت بزرگ</a> |
<a href="#" onclick="javascript:body.style.fontSize='0.75em'; setFontSizeCookie('page_font_size', '0.75', 30);">اندازه فونت حالت پیش فرض</a>
<hr>
<p>نمونه متن در تگ p</p>
<hr>
برای بررسی تغییراتی که هر کدام از روش های بالا در خروجی HTML صفحه ایجاد می کنند می توانیم از امکان Developer Tools در مرورگرها استفاده کنیم، به طور مثال با زدن دکمه F12 در مرورگر فایرفاکس این امکان در دسترس است.
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
» ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
commentنظرات (۱۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: S
زمان: ۱۹:۴۷:۲۷ - تاریخ: ۱۳۹۱/۱۲/۲۱
بابا ایول.....ممنونممممممممم
نویسنده: ابوالفضل
زمان: ۱۳:۴۴:۵۷ - تاریخ: ۱۳۹۲/۰۵/۲۲
خوب بود
نویسنده: elham
زمان: ۱۲:۳۶:۵۴ - تاریخ: ۱۳۹۲/۱۱/۰۴
سلام
واقعاً دوست دارم
ایشاالله خدا بهت عمر طولانی بده دادا
منو که از دست استاد پایان نامه خلاص کردی !!!!!!!
فقط با مطالب شما پیش رفتم
واقعاً دعات میکنم
پاسخ: 
تشکر :-)
نویسنده: حسین
زمان: ۱۴:۳۹:۰۷ - تاریخ: ۱۳۹۲/۱۲/۲۵
دمت گرم خیلی خوب توضیح دادین
ادامه بدین
موفق باشین
نویسنده: حسین
زمان: ۲۱:۳۸:۲۵ - تاریخ: ۱۳۹۲/۱۲/۲۵
وقتی میذارم تو ابتدای قالب وبلاگم در میهن بلاگ فقط همون قسمت rss و یا عنوان رو بزرگ میکنه.
کد اول هم که میزارم همه چیز رو درشت میکنه الا متن اصلی رو.
چی کار کنم؟
پاسخ: 
کد اول به صورت پیش فرض فونت تگ های p را تغییر می دهد، می توانید به جای تگ p از div استفاده کنید:
 var p = document.getElementsByTagName('div');
نکته: تگ های موجود در صفحه نباید کلاس و استایل CSS اختصاصی داشته باشند، در این صورت کار کمی مشکل و توضیح آن سخت می شود!
نویسنده: حسین
زمان: ۱۱:۴۰:۳۷ - تاریخ: ۱۳۹۲/۱۲/۲۹
ایا میشه که برای هر استایلی که در قالب وجود داره یک جاوا اسکرایپت مجزا گذاشت. مثلا کد بالا رو بزاریم تو استایل قسمت نظرت یا متن اصلی و........
پاسخ: 
برای این کار باید با برنامه نویسی وب آشنا باشید، اگر در وبلاگ این کار را می خواهید انجام دهید، باید از id مخصوص بلاک مربوطه استفاده کنید، به فرض بخش نظرات در بلاک div مخصوصی خروجی داده می شود، کد جاوا اسکریپتتان باید از id آن بلاک استفاده کند، اگر هم با PHP کار می کنید، اعمال این موارد ساده است، کافی است متناسب با هر صفحه، خروجی خاص آن را چاپ کنید.
نویسنده: مونا
زمان: ۱۹:۱۳:۰۲ - تاریخ: ۱۳۹۳/۰۳/۱۱
سلام خسته نباشید ....
من میخوام یک فرم ثبت نام درست کنم .. امکانش هست آموزش فرم با جاوا اسکریپت هم توضیح دهید
با تشکر فراوان
پاسخ: 
برای ایجاد فرم ثبت نام باید با PHP آشنا باشید، جاوا اسکریپت صرفا می تواند در اعتبار سنجی سمت کاربر کاربرد داشته باشد.
نویسنده: مترسک
زمان: ۱۲:۵۲:۵۴ - تاریخ: ۱۳۹۳/۰۶/۱۷
سلام ممنون بابت توضیح تون من یک سوال دارم
چطوري كاري كنم كه وقتي موس رو بردم روي يه لينك، لينك رنگش عوض بشه مثلا رنگ لينك سياه باشه ولي با رفتن موس روي لينك رنگش قرمز یا سفید بشه؟
از قالب وطن اسکین هم استفاده میکنم.
پاسخ: 
باید با CSS و نحوه استفاده از سلکتور a و a:hover آشنا باشید، لطفا در این رابطه در وب جستجو کنید.
نویسنده: مهدی
زمان: ۱۱:۲۸:۱۳ - تاریخ: ۱۳۹۴/۰۵/۱۵
با سلام و خسته نباشید
واقعا مطالب خوبیه
فقط یه سوال!
همون طور که در نظرات هم گفته بودید اگه از css استفاده شده باشه یه کم کدنویسیش سخته!
اگه ممکنه یه توضیح برای این هم بدین و همینطور برای px ها به جای em
با سپاس
پاسخ: 
در آموزش سعی شده هم از روش px و هم em استفاده شود که در واقع فرق خاصی به لحاظ خروجی نهایی ندارند و تنها متدها متفاوت است، به عبارتی در صورت آشنایی با جاوا اسکریپت، به راحتی می توان حالت اول (که از px استفاده شده) را برای حالت دوم نیز تنظیم کرد و بر عکس (البته قاعدتا باید با مفهوم دستورات و نحوه کدنویسی آشنا باشید)، در مورد بخش دوم سوال، می توانید یک ID به عنصر مورد نظر نسبت دهید و با الگوبرداری از نمونه کد زیر، توابع آموزش داده شده را متناسب با نیاز خود تغییر دهید:
<span id="span">Your Span Tag</span>
<script>
var span = document.getElementById("span");
span.style.fontSize = "25px";
</script>
نویسنده: melody
زمان: ۱۳:۵۹:۰۵ - تاریخ: ۱۳۹۵/۰۸/۰۹
سلام میشه بگید چطوری پوشه فونت اسکریپتو تبدیل به فونت فارسی کنم
فرمت های موجود فونت در پوشه اینا هستن
svg
eot
woff
ttf
woff2
پاسخ: 
لطفا عبارت "نحوه استفاده از فونت فارسی در وب با CSS" را جستجو نمائید، پس از آشنایی با این مسئله باید فونت های خود را با همان نام، جایگزین فونت های موجود کنید (البته معمولا امکان تغییر نام نیز وجود خواهد داشت، منتها باید کل اسکریپت جستجو و عبارت فونت قبلی با مقدار جدید جایگزین شود).
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




7 × 8
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

امکان بهره مندی از تخفیف