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

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

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

 

از روش اندازه گذاری دقیق و یا ثابت هنگامی استفاده خواهد شد که اندازه خروجی ( رزولوشن تصویر (Resolution) ، نوع مرورگر ، و اندازه صفحه نمایشگر ) مشخص شده باشد.

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

Code: CSS
  1.  
  2. ۱۶px=1em
  3. pixels/16=em
  4. h1 {font-size:2.5em;} /* 40px/16=2.5em */
  5. h2 {font-size:1.875em;} /* 30px/16=1.875em */
  6. p {font-size:0.875em;} /* 14px/16=0.875em */
  7.  

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

Code: CSS
  1.  
  2. body {
  3. font-size: 62.5%; /* font-size 1em = 10px */
  4. }
  5. p {
  6. font-size: 1.2em; /* 1.2em = 12px */
  7. }
  8.  

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

Code: CSS
  1.  
  2. h1 {font-size:1.6em;} /* 16px/10=1.6em */
  3. h2 {font-size:1.4em;} /* 14px/10=1.4em */
  4. p {font-size:1.2em;} /* 12px/10=1.2em */
  5.  


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

منبع: وب تارگت