اندازه قلم

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ویژگی font-size اندازه قلم متن را مشخص می‌کند.[۱]

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

همیشه از تگ‌های مناسب HTML، مانند: <h1> تا <h6> برای عناوین و از <p> برای پاراگراف‌ها استفاده کنید.

مقدار font-size می‌تواند اندازه مطلق، یا نسبی باشد.

اندازه مطلق:

  • اندازه مشخصی برای متن تنظیم می‌کند
  • به کاربران اجازه تغییر اندازه متن در تمامی مرورگرها را نمی‌دهد (این امر به علت دلایل قابلیت دسترسی، مناسب نیست)
  • اندازه نسبی زمانی کاربردی است که اندازه فیزیکی خروجی شناخته شده باشد

اندازه نسبی

  • اندازه را نسبت به عناصر اطراف تنظیم می‌کند
  • به کاربران اجازه تغییر اندازه متن را در مرورگرها می‌دهد
نکته: اگر اندازه قلم را مشخص نکنید، اندازه پیش‌فرض برای متن‌های عادی، مانند پاراگراف‌ها، ۱۶ پیکسل (16px=1em) است.

تنظیم اندازه متن با پیکسل ها (به انگلیسی: Pixels)

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

مثال
 1 h1 {
 2   font-size: 40px;
 3 }
 4 
 5 h2 {
 6   font-size: 30px;
 7 }
 8 
 9 p {
10   font-size: 14px;
11 }


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

تنظیم اندازه قلم با Em

به‌منظور تغییر اندازه متن (در منوی مرورگر) توسط کاربران، بسیاری از توسعه دهندگان از em به جای پیکسل‌ها استفاده می‌کنند.

واحد اندازه em توسط W3C توصیه می‌شود.

1em برابر با اندازه قلم جاری است. اندازه متن پیش‌فرض در مرورگر ۱۶ پیکسل است؛ بنابراین، اندازه پیش‌فرض 16px ،1em است.

اندازه می‌تواند با استفاده از فرمول روبه رو از پیکسل به em تبدیل شود: pixels/16=em

مثال
 1 h1 {
 2   font-size: 2.5em; /* 40px/16=2.5em */
 3 }
 4 
 5 h2 {
 6   font-size: 1.875em; /* 30px/16=1.875em */
 7 }
 8 
 9 p {
10   font-size: 0.875em; /* 14px/16=0.875em */
11 }


در مثال بالا، اندازه متن بر حسب em همانند مثال قبل که بر حسب pixel است. اما، با اندازه em، امکان تنظیم اندازه متن در تمامی مرورگرها وجود دارد.

متأسفانه، هنوز در نسخه‌های قدیمی‌تر IE مشکل وجود دارد. متن بیش از حدی که باید بزرگ یا کوچک می‌شود.

استفاده از ترکیبی از درصد (به انگلیسی: percent) و Em

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

مثال
 1 body {
 2   font-size: 100%;
 3 }
 4 
 5 h1 {
 6   font-size: 2.5em;
 7 }
 8 
 9 h2 {
10   font-size: 1.875em;
11 }
12 
13 p {
14   font-size: 0.875em;
15 }


کد ما بسیار خوب کار می‌کند! این کد متن را در تمامی مرورگرها با سایز یکسان نمایش می‌دهد، و به تمامی مرورگرها اجازه بزرگنمایی یا تغییر اندازه متن را می‌دهد!

اندازه قلم واکنش گرا

اندازه متن را می‌توان با واحد vw تنظیم کرد، که به معنای «عرض viewport» است.

با این روش اندازه متن از اندازه پنجره مرورگر تبعیت می‌کند:

Hello World

اندازه پنجره مرورگر را تغییر دهید تا نحوه تغییر اندازه قلم را ببینید.

مثال
1 <h1 style="font-size:10vw">Hello World</h1>


Viewport اندازه پنجره مرورگر است. 1vw = 1% از عرض viewport است. اگر پهنای viewport 50cm باشد، 1vm برابر با 0.5cm است.


منابع آموزشی