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

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


امیر سروری ۱۶ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, 7th ژانویه , 2011 37866 بازدید

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

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

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

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

۱۶px=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 به مقدار ۶۲٫۵% تعیین کنید.

 
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 */


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

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


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


  1. Ali Aghdam
    16 ژانویه 2011

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

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




    • امیر سروری
      16 ژانویه 2011

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




  2. نیما
    8 فوریه 2011

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




  3. حامد
    9 فوریه 2011

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




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

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




  5. مجتبي
    26 ژوئن 2011

    با سلام و تشکر از سایت و مطالب مفیدتون

    من با کد زیر

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

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

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

    ممنون




    • امیر سروری
      27 ژوئن 2011

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

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




  6. مرتضوی
    9 آوریل 2012

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




  7. میلاد
    6 می 2012

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

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

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




  8. محسن
    31 می 2012

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



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




  9. محسن شهبازی
    22 اکتبر 2012

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

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




  10. فهیم
    2 آگوست 2013

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




  11. ali
    7 جولای 2014

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




  12. سارا
    20 نوامبر 2015

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



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





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

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

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

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

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



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

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