اندازه شهره CSS

اندازه فونت

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 سانتی‌متر است.