آموزش ویژگی font-size در CSS

Ratings
(0)

ویژگی font-size سایز متن را مشخص می کند. در برنامه نویسی وب، مدیریت کردن سایز متن، از اهمیت زیادی برخوردار است. اما نباید از تنظیمات سایز فونت برای شبیه کردن پاراگراف ها به عنوان ها یا شبیه کردن عنوان ها به پاراگراف ها استفاده کنید.  همواه از تگ های HTML مناسب، مانند <h1> تا <h6> برای عنوان ها، و از تگ <p> برای پاراگراف ها استفاده کنید.

مقدار font-size می تواند یک سایز مطلق(absolute) یا یک سایز نسبی(relative) داشته باشد.

سایز مطلق(absolute):

  1. متن را به یک سایز مشخص در می آورد.
  2. به کاربر اجازه نمی دهد در تمام مرورگرها، سایز متن را تغییر دهد.
  3. سایز مطلق وقتی مفید است که اندازه فیزیکی خروجی مشخص باشد.

سایز نسبی(Relative):

  1. سایز را نسبت به عناصر پیرامون خود تنظیم می کند.
  2. به کاربر امکان می دهد تا سایز متن را در مرورگرها تغییر دهد.

نکته: اگر یک سایز را برای فونت مشخص نکنید، سایز پیش فرض برای یک متن نرمال، مانند پاراگراف ها، 16px است(16px=1em).

تنظیم سایز فونت با استفاده از پیکسل

تنظیم سایز متن با پیکسل به ما امکان می دهد تا کنترل کاملی روی سایز متن داشته باشیم:

مثال شماره 1

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
امتحان کنید

نکته: اگر از پیکسل استفاده کنید، بازهم می توانیم با استفاده از ابزار بزرگنمایی(زوم) کل صفحه را تغییر اندازه دهیم.

تنظیم سایز فونت با استفاده از Em

برای اینکه به کاربر امکان دهیم تا متن را (در منوی مرورگر) تغییر اندازه دهد، بسیاری از برنامه نویسان از واحد em به جای پیکسل استفاده می کنند. 1em برابر است با سایز فونت فعلی. سایز متن پیش فرض در مرورگرها، 16px است. بنابراین سایز فونت پیش فرض برای 1em مقدارِ 16px است. با استفاده از فرمول زیر، می توانیم سایز پیکسل را به em محاسبه کنیم:

pixels/16=em

مثال شماره 2

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 */
}
امتحان کنید

در مثال بالا، سایز متن به em محاسبه شده است و مشابه با مثال قبلی است که سایز آن به پیکسل محاسبه شده بود. اما، با استفاده از سایز em، این امکان وجود دارد تا سایز متن را در تمام مرورگرها تنظیم کنیم. متاسفانه، هنوز با نسخه های قدیمی مرورگر اینترنت اکسپلورر (در این زمینه)  مشکل داریم. در مرورگر اینترنت اکسپلورر، وقتی که متن را بزرگتر می کنیم، بیش از اندازه ی خود بزرگ می شود و وقتی متن را کوچکتر می کنیم، بیش از اندازه کوچک می شود.

استفاده ی ترکیبی از درصد و Em

راه حلی که در تمام مرورگرها کار می کند، این است که یک font-size پیش فرض برای عنصر <body> به درصد تنظیم کنیم:

مثال شماره 3

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
امتحان کنید

 اکنون، کد ما به خوبی کار می کند. در این کد، همین سایزِ متن ، در تمام مرورگرها نشان داده می شود و به تمام مرورگرها امکان می دهد تا بزرگنمایی(زوم) کنند یا متن را تغییر اندازه دهند.

سایز فونت واکنشگرا

سایز متن می تواند برابر با یک واحد vw شود؛ که مخفف عبارت viewport width می باشد. با استفاده از این روش، سایز متن از سایز پنجره ی مرورگر پیروی(follow) می کند.

سلام به شما

پنجره ی مرورگر را تغییر اندازه دهید تا ببینید که سایز فونت چگونه مقیاس دهی می شود.

مثال شماره 4

<h1 style="font-size:10vw">Hello World</h1>
امتحان کنید

 نکته: به سایز پنجره ی مرورگر Viewport گفته می شود. 1vw = 1% از ویوپورت(Viewport).  اگر ویوپورت 50cm باشد، آنگاه 1vw برابر با 0.5cm خواهد بود.

 

  • بازدید: 143

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال