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

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


امیر سروری ۱۶ دیدگاه CSS , استاندارد وب سایت , اصول طراحی وب سایت جمعه, ۱۷ام دی , ۱۳۸۹ 26403 بازدید

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
    ۲۶ دی ۱۳۸۹

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

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




    • امیر سروری
      ۲۶ دی ۱۳۸۹

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




  2. نیما
    ۱۹ بهمن ۱۳۸۹

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




  3. حامد
    ۲۰ بهمن ۱۳۸۹

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




  4. یک طراح وب
    ۲۰ بهمن ۱۳۸۹

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




  5. مجتبي
    ۵ تیر ۱۳۹۰

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

    من با کد زیر

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

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

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

    ممنون




    • امیر سروری
      ۶ تیر ۱۳۹۰

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

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




  6. مرتضوی
    ۲۱ فروردین ۱۳۹۱

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




  7. میلاد
    ۱۷ اردیبهشت ۱۳۹۱

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

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

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




  8. محسن
    ۱۱ خرداد ۱۳۹۱

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




    • امیر سروری
      ۱۱ خرداد ۱۳۹۱

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




  9. محسن شهبازی
    ۱ آبان ۱۳۹۱

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

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




  10. فهیم
    ۱۱ مرداد ۱۳۹۲

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




  11. ali
    ۱۶ تیر ۱۳۹۳

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




  12. سارا
    ۲۹ آبان ۱۳۹۴

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



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





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

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

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

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

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



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

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