سی ایس ایس فونت سائز
- صفحه قبلی سی ایس ایس فونت نمونہ
- صفحه بعدی سی ایس ایس گوگل فونت
اندازه فونت
font-size تنظیم اندازه متن با استفاده از ویژگی
در طراحی وب، مدیریت اندازه متن بسیار مهم است. اما، نباید از تغییر اندازه فونت برای اینکه پاراگراف‌ها مانند عنوان‌ها به نظر برسند یا عنوان‌ها مانند پاراگراف‌ها به نظر برسند، استفاده کرد.
همیشه از برچسب‌های HTML صحیح استفاده کنید، مانند <h1> - <h6> برای عنوان‌ها، و <p> فقط برای پاراگراف‌ها.
مقدار font-size می‌تواند اندازه مطلق یا نسبی باشد.
اندازه‌های مطلق:
- تنظیم اندازه متن به اندازه مشخص
- اجازه نمی‌دهد کاربران در همه مرورگرها اندازه متن را تغییر دهند (دسترسی ضعیف)
- اندازه‌های مطلق مفید هستند وقتی اندازه فیزیکی خروجی معلوم است
اندازه‌های نسبی:
- تنظیم اندازه در مقایسه با عناصر اطراف
- اجازه دادن به کاربران برای تغییر اندازه متن در مرورگر
توضیح:اگر اندازه فونت را مشخص نکرده‌اید، اندازه پیش‌فرض متن عادی (مانند پاراگراف) 16px است (16px = 1em).
تنظیم اندازه فونت با استفاده از پیکسل
استفاده از پیکسل برای تنظیم اندازه متن می‌تواند کنترل کامل اندازه متن را فراهم کند:
مثال
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
توضیح:اگر از پیکسل استفاده کرده‌اید، همچنان می‌توانید از ابزار مقیاس‌دهی برای تنظیم اندازه کل صفحه استفاده کنید.
اندازه فونت با استفاده از em تنظیم شود
برای اجازه دادن به کاربران برای تنظیم اندازه متن (در منوی مرورگر)، بسیاری از توسعه‌دهندگان از em به جای پیکسل استفاده می‌کنند.
W3C توصیه می‌کند از اندازه em استفاده شود.
1em برابر با اندازه فعلی فونت است. اندازه پیش‌فرض متن در مرورگر 16px است. بنابراین، اندازه پیش‌فرض 1em برابر با 16px است.
می‌توانید از این فرمول برای تبدیل پیکسل به em برای محاسبه اندازه استفاده کنید: 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 */
}
در مثال بالا، اندازه متن واحد em با اندازه پیکسل در مثال قبلی مشابه است. اما، اگر از اندازه em استفاده کنید، می‌توانید اندازه متن را در همه مرورگرها تنظیم کنید.
متاسفانه، نسخه‌های قدیمی اینترنت اکسپلورر همچنان مشکلاتی دارند. در بزرگتر کردن متن، آن‌ها بزرگتر از اندازه‌ای که باید باشند، و در کوچکتر کردن متن، کوچکتر از اندازه‌ای که باید باشند.
استفاده از ترکیب درصد و Em
مثال
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
کد ما در حال حاضر به خوبی کار می‌کند! در تمام مرورگرها اندازه متن یکسان نمایش داده می‌شود و به تمام مرورگرها اجازه می‌دهد که اندازه متن را بزرگتر یا کوچکتر کنند!
اندازه فونت واکنش‌گرا
می‌توانید از vw تنظیم اندازه متن با استفاده از واحد، به معنای "اندازه ویدجت" ("viewport width") است.
در اینجا، اندازه متن از اندازه پنجره مرورگر پیروی می‌کند، لطفاً اندازه پنجره مرورگر را تغییر دهید تا ببینید که اندازه فونت چگونه تغییر می‌کند:
مثال
<h1 style="font-size:10vw">Hello World</h1>
ویدجت (Viewport) اندازه پنجره مرورگر است. 1vw = 1% از اندازه ویدجت. اگر ویدجت 50 سانتی‌متر عرض داشته باشد، 1vw برابر با 0.5 سانتی‌متر است.
- صفحه قبلی سی ایس ایس فونت نمونہ
- صفحه بعدی سی ایس ایس گوگل فونت
