cssblog.ir logo
P

font-size

تعیین سایز فونت متن در زبان CSS

برای تعیین نمودن سایز نوشته ها می توان از مشخصه font-size استفاده نمود که به شکل های بسیار مختلفی می توان آن را مقداردهی و استفاده نمود

از مشخصه font-sizeبرای تعیین دو کاربرد اصلی دارد. کاربرد اول تعیین سایز فونت (سایز نوشته‌ها و متن‌ها) می‌باشد و کاربرد دوم آن این است که مبنایی برای محاسبه واحدهای ex و rem و em می باشد.

مقادیر قابل قبول

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

کلمات کلیدی

کلمات کلیدی قابل استفاده برای سایز فونت به شرح زیر است

xx-small, x-small, small, medium, large, x-large, xx-large

این مقادیر توسط مرورگر پردازش شده و به مقدار تعریف شده آنها نگاشت می شوند.

کلمات کلیدی نسبی

دو کلمه کلیدیlarger وsmaller نیز حالت نسبی دارند و به نسبت والد آنها محاسبه می‌شوند. برای مثال اگر سایز فونت والد با استفاده از کلمه کلیدی smallتعریف شده باشد و در فرزند از کلمه کلیدیlarger استفاده شود، سایزی که فرزند خواهد داشت چیزی در حدود سایزmedium خواهد بود (بدلیل افزایش سایز)

p {
	font-size: 14px;
}
p span {
	font-size: smaller;
}

مقادیر درصدی

مبنای محاسبه درصد، سایز فونت والد می باشد. برای مثال اگر سایز فونت والد ۱۶ پیکسل باشد و در فرزند سایز فونت ۱۵۰ درصد نوشته شود، سایز فونت فرزند چیزی در حدود 24 پیکسل خواهد بود.

p {
	font-size: 16px;
}
p span {
	font-size: 150%;
}

واحد em

وقتی درباره مقدار دهی نسبی صحبت می شود یکی از بهترین واحدهای قابل استفاده، واحد em می‌باشد. مبنای این واحد سایز فونت والد می‌باشد. یعنی برای مثال اگر والد سایز ۱۴ پیکسل داشته باشد، هر em برابر با ۱۴ خواهد بود و در نتیجه 2em برابر با 28 پیکسل.

.post {
	font-size: 16px;
}
.post .post-title {
	font-size: 1.5em; /* 24px */
}

واحد rem

این واحد مانند em است و فقط یک تفاوت با آن دارد و آن هم مبنای محاسبه می باشد که در rem به عنصر ریشه (root) مربوط می شود که معمولا HTML خواهد بود.

html {
	font-size: 14px;
}
.post {
	/* 28px */
	font-size: 2rem;
}

مثال: همانطور که مشاهده می‌کنید در مثال زیر با اینکه والد پاراگراف خود دارای سایز فونت می‌باشد اما بدلیل استفاده از rem مرجع محاسبه به عنصر ریشه که در اینجا تگ HTML است باز می‌گردد.

html {
	font-size: 14px;
}
.post {
	font-size: 16px;
}
.post .post-title {
	/* 28px */
	font-size: 2rem;
}

واحد ex

منطق این واحد کمی عجیب است. در این واحد، مبنای محاسبه این واحد ارتفاع حرف x (بصورت حروف کوچک) روی عنصر ریشه می باشد. یعنی با تغییر font-face  اگر سایز x آن متفاوت باشد، سایزها تغییر پیدا خواهد کرد.

p {
	font-size: 5ex;
}

واحدهای مربوط به viewport (اندازه پنجره نمایش)

جالب است بدانید که واحدهایvh (یک صدم ارتفاع پنجره نمایش) وvw (یک صدم عرض پنجره نمایش) در سایز فونت قابل استفاده هستند. مزیت استفاده از این واحدها این است که می‌توان بین سایز فونت‌ها و اندازه پنجره نمایش ارتباط ایجاد نمود تا با تغییر سایز پنجره، سایز فونت‌ها نیز تغییر کند.

استفاده از vh

p {
	font-size: 10vh;
}

واحد ch

این واحد نیز همانند ex عمل می کند با این تفاوت که معیار آن اندازه حرف صفر (۰) در فونت می باشد.

مثال:

p {
	font-size: 20ch;
}

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

استفاده از واحدهای نسبی یک مزیت ویژه به همراه دارد و آن هم این است که تغییر دادن سایزها به مراتب راحت‌تر خواهد بود. برای مثال اگر ما بخواهیم فونت پروژه را به کلی تغییر دهیم، بدلیل  اینکه سایز بسیاری از فونت‌های فارسی با هم مختلف هستند، اگر از واحدهای مطلق مانند پیکسل استفاده کرده باشیم، باید تک تک این قسمت ها را تغییر دهیم اما اگر از واحدهای نسبی بخصوص remاستفاده کرده باشیم تعداد جاهایی که باید تغییر پیدا کنند کم تر خواهد بود.

مشخصه font

در هنگام توضیح مشخصه font اشاره شد که مشخصهfont-size از مشخصه های ضروری برای مشخصهfont است و اگر سایز فونت تعیین نشود کل مشخصهfont نادیده گرفته خواهد شد.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند