اندازه فونت متغیر و ثابت

آشنایی با دو روش اندازه گذاری متغیر برای فونت ها ( em ) و اندازه گذاری دقیق و یا ثابت


امیر سروری 16 دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت Friday, 7th January , 2011 44227 بازدید

CSS یک ابزار بسیار مناسب ، اساسی و قدرتمند برای طراحی وب سایت و شکل بخشیدن به صفحات وب سایت است که با ارائه ورژن جدید آن ( CSS3 ) قدرت بیشتری نیز گرفته است . دراین مجموعه تلاش خواهد شد ، تعدادی از تکنیک های کاربردی ، فوق العاده و ساده از CSS را با یکدیگر مرور کنیم .

اندازه متغیر فونت ها

با استفاده از روش اندازه گذاری متغیر برای فونت ها ( em ) ، اندازه فونت ها با توجه به محیط اطراف و اجزاء تشکیل دهنده وب سایت تعیین می شود ، و کاربران نیز می توانند به راحتی با استفاده از تنظیمات مرورگر خود اندازه فونت ها را به دلخواه خود تغییر دهند.

از روش اندازه گذاری دقیق و یا ثابت هنگامی استفاده خواهد شد که اندازه خروجی ( رزولوشن تصویر (Resolution) ، نوع مرورگر ، و اندازه صفحه نمایشگر ) مشخص شده باشد.
در مرورگرهایی مانند Internet Explorer اندازه های متفاوتی برای فونت ها با واحدهای یکسان نسبت به مرورگرهای دیگر وجود دارد . اینها دلایلی هستند برای اینکه از واحد ( em ) برای اندازه گذاری استفاده شود.
برای اندازه گذاری فونت ها در طراحی وب به صورت متغیر و انعطاف پذیر ( relative ) ، می توانید به روش ساده زیر عمل کنید .
اگر تا پیش از این از واحد ( px ) برای اندازه گذاری فونت ها استفاده می کرده اید ، تبدیل این متغیرها و معیار ها برای شما کمی سخت خواهد بود. برای تبدیل واحد ( Px ) به ( em ) می توانید از فرمول زیر استفاده نمائید. طبیعی است پس ازمدتی معیار این واحد اندازه گذاری را نیز درک خواهید کرد.

16px=1em
pixels/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

می توانید از روش فوق العاده ، کاربر پسند و ساده زیر نیز برای اندازه گذاری متغیر فونت ها استفاده کنید.
با استفاده از این روش تبدیل واحد ( px ) و ( em ) به یکدیگر بسیار آسان خواهد شد ، اندازه فونت ها در تمامی مرورگرها به صورت یکسان خواهد بود و کاربر توانایی بزرگ و کوچک کردن فونت ها با استفاده از تنظیمات مرورگر را نیز خواهد داشت. اندازه فونت را برای body به مقدار 62.5% تعیین کنید.

 
body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}

همانطور که ملاحظه میکنید با انجام این اندازه گذاری ، واحدها به راحتی با یک نسبت مناسب به یکدیگر تبدیل می شوند.

h1 {font-size:1.6em;} /* 16px/10=1.6em */
h2 {font-size:1.4em;} /* 14px/10=1.4em */
p {font-size:1.2em;} /* 12px/10=1.2em */


نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


16 دیدگاه برای این نوشته ثبت شده است


  1. Ali Aghdam
    16 January 2011

    نکته قابل توجهی است ولی این که بخواهیم این محاسبات!!! رو به صورت دستی انجام دهیم برای ما برنامه نویسا یکم خارج از حوصله است

    به نظرم یه برنامه کوچیک تهیه کنیم که با دادن فایل CSS بهش، اون اینکارو بکنه و ما از همون px قبلی خودمون استفاده کنیم:)




    • امیر سروری
      16 January 2011

      امان از دست این برنامه نویسها ، خوب این تکنیک خوبیش اینه ه دیگه احتیاج به محاسبه نداره ;)




  2. نیما
    8 February 2011

    جدیدا این سایز دهی متغیر مد شده خیلی هم مایه شر و دردسره؛ اما مرسی این روش خیلی آسونتر میکنه قضیه رو




  3. حامد
    9 February 2011

    مرسی جالب بود :)




  4. یک طراح وب
    9 February 2011

    عالی و ساده
    استفاده کردیم :)




  5. مجتبي
    26 June 2011

    با سلام و تشكر از سايت و مطالب مفيدتون

    من با كد زير

    ul {
    list-style-image: url(bullet.gif);
    }

    كنار عناوين يه ليست از عكس استفاده كردم اما مشكل من با متون فارسيه كه ميخوام اين عكس سمت راست بيفته ؟

    البته اگه لطف كنين راهنمايي كامل تري در مورد متون فارسي بكنين كه خيلي عاليه چون دستورات همش مربوط به متون انگليسي ميشه مثل فرورفتگي خط اول پاراگراف كه سمت چپ تو ميره

    ممنون



    • مجتبی @ سلام دوست عزیز کافیه شما direction رو عوض بکنید .

      ul { direction:rtl; list-style-image:url(bullet.png)}




  6. مرتضوی
    9 April 2012

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




  7. میلاد
    6 May 2012

    کد تغییر اندازه فونت توسط کابر :

    (function setBaseFontSize(sizeIndex
    {
    document.body.style.fontSize = (100 + sizeIndex * 13) + ‘%’;
    }

    بعدش باید سه تا دکمه و یا لینک تعریف کنید و کد زیر را در داخل بلاک آن بنویسید :
    (onclick=”setBaseFontSize(1
    البته باید در جاهایی که قصد این قابلیت را دارید از همین واحد em استفاده بشه.(در css و یا داخل تگ Style)




  8. محسن
    31 May 2012

    برای متون داخل سایت که همون طور که توی پُست هم ذکر شده استفاده از واحد em مناسب هستش چون کاربر میتونه اندازه فونت رو به دلخواه تغییر بده.
    اما برای اندازه فونت منوهای سایت (مثلاً navigation) هم از واحد em استفاده کنیم بهتره یا واحد px؟
    چون اینجا اگر کاربر اندازه فونت رو تغییر بده، فکر میکنم ممکنه ساختار منو بهم بریزه.
    درست میگم؟
    در اینجور مواقع واحد px رو توصیه میکنید یا همون em؟



    • محسن @ این چیزی که در مورد منو ها و غیره گفتی درسته اما اگر بتونی این منو ها و ساختار وب سایت رو هم درصدی کار کنی و ریلیتیو باشه نسبت به اندازه رزولوشن دیگه مشکلی از اون نظر هم نخواهی داشت .
      اما اگر نتونی این کار رو انجام بدی و بخوای ترکیبی از این دو رو داشته باشی موافقم با پیکسلی کردن اندازه منو ها و قسمتهایی که بزرگ و کوچیک شدن متن توشون تاثیر میزاره و باعث بهم ریختگی میشه .
      البته گزینه درست تر طراحی واکنشگرا و ریلیتیو هست . موفق باشی .




  9. محسن شهبازی
    22 October 2012

    بسیار زیبا بود واقعا کاربردی هست مطالبتون و صد البته شیوا و رسا و به زبان ساده

    امیدوارم تو کاره تون موفق باشید مهندس




  10. فهیم
    2 August 2013

    سلام
    من درست متوجه فرمول نشدم!قضیه رو نگرفتم
    یعنی اگر بخوام px رو تبدیل به em کنم این فرمول را میخوام؟ در غیر این صورت همون em رو بزنم و ادامه مطلب ؟




  11. ali
    7 July 2014

    سلام و خسته نباشد. میخواستم بدونم چطور میشه متن رو در یک کادر حفظ کرد.یعنی هر چی تعداد کارکتر زیاد میشه به طول کادر صدمه وارد نکنه و از صفحه خارج نشه و فقط تو حالت عمودی اظافه بشه درست مثل همین کادر دیدگاه خودتون.ممنون میشم جوابتونو تو امیلم ببینم.




  12. سارا
    20 November 2015

    ممنون از مطالب مفیدتون
    سوالی داشتم ممنون میشم راهنمایی کنید
    چیکار کنیم تار در نسخه های موبایل فونت فارسی و انگلیسی بهم نریزه؟



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.