اندازه قلم

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

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

محتویات

۱ تنظیم اندازه متن با پیکسل ها (به انگلیسی: Pixels)
۲ تنظیم اندازه قلم با Em
۳ استفاده از ترکیبی از درصد (به انگلیسی: percent) و Em
۴ اندازه قلم واکنش گرا
۵ منابع آموزشی

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

همیشه از تگ‌های مناسب 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 }

مشاهدهٔ نتیجه

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