آموزش متدهای طراحی سایت

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

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

 برگرفته از سایت پرتال

آموزش بهینه سازی سایت

آموزش طراحی سایت

آموزش طراحی وب

آموزش طراحی وب سایت

روش بهینه سازی سایت

روش طراحی سایت

روش های طراحی سایت

طراحی سایت

طراحی سایت با قالب آماده

طراحی وبسایت

۹۶/۰۵/۰۳ موافقین ۰ مخالفین ۰
Novin Novin

نظرات (۰)

هیچ نظری هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی