cssblog.ir logo
P

font

نحوه تعیین فونت متن در صفحات وب

مشخصه font یک نوع مشخصه shorthand (ادغام کننده چند مشخصه در یک مشخصه) است و با استفاده از آن می‌توان جزئیات مربوط به نوشتار و فونت را در داخل یک دستور تعیین نمود.

مشخصه font یک نوع مشخصه shorthand (ادغام کننده چند مشخصه در یک مشخصه) است و با استفاده از آن می‌توان جزئیات مربوط به نوشتار و فونت را در داخل یک دستور تعیین نمود.

چند نمونه مثال استفاده از این مشخصه:

p {
  font: normal small-caps normal 16px/1.4 tahoma;
}

h1 {
  font: normal normal 16px tahoma;
}

لیست مقادیر

این مشخصه می تواند مقادیر زیر را قبول کند که تکه کد اول برابر با کد دوم می باشد:

p {
	font: normal small-caps normal 12px/1.2 Arial;
}

p {
	font-family: Arial;
	line-height: 1.2;
	font-weight: normal;
	font-stretch: normal;
	font-variant: small-caps;
	font-size: 12px;
}

این مشخصه می تواند از چند زیرمشخصه تشکیل می شود که عبارتند از:

مشخصه font-strech

این مشخصه می تواند میزان عرض فونت را تعیین کند. یعنی با استفاده از این مشخصه می‌توان تعیین نمود که فونت به چه میزان متراکم یا منبسط باشد. مقادیری که این مشخصه می‌تواند قبول کند به شرح زیر است:

normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded

اطلاعات بیشتر درباره font-strech

مشخصه font-style

منظور از استایل فونتitalic یاoblique بودن است که از طریق این مشخصه قابل تعیین است. مقادیر مجاز این مشخصه:

normal, italic, oblique, inherit

اطلاعات بیشتر درباره font-style

مشخصه font-variant

با استفاده از این مشخصه می‌توان درباره حروف کوچک و نحوه نمایش آنان قوانینی را تعیین کرد که پیشنهاد می‌کنم مطلب مرتبط با آن را بخوانید

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

normal, small-caps, inherit, all-small-caps, petite-caps, all-petite-caps, titling-caps, unicase

اطلاعات بیشتر درباره font-variant

مشخصه font-weight

با استفاده از این مشخصه میزان ضخامت (وزن) حروف را می تواند تعیین نمود که مقادیر زیر را می توان برای آن تعیین کرد.

normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit

اطلاعات بیشتر درباره font-weight

مشخصه font-size

همان سایز فونت (اندازه قلم)‌ است که مقادیر بسیار مختلفی را قبول می کند که شامل مقادیر پیکسلی و لیست زیر است:

medium small x-small xx-small
smaller xx-large x-large large
inherit percentage (%) larger

‌اطلاعات بیشتر درباره font-size


مشخصه line-height

مشخصه ای است که ارتفاع خطوط را تنظیم می کند:

  • مقدار پیشفرض: normal
  • مقدار عددی
  • مقدار درصدی (percentage)

اطلاعات بیشتر درباره line-height

مشخصه font-family

با استفاده از این مشخصه نام فونتی که قصد استفاده از آن را داریم، تعیین می کنیم.

اگر فونت با استفاده از font-face تعریف و فایل آن موجود باشد از آن فونت استفاده می شود در غیر اینصورت مرورگر در کامپیوتر شخص به دنبال آن می گردد.

اطلاعات بیشتر درباره font-family

نکات استفاده از مشخصه font

در هنگام استفاده از این مشخصه نکاتی را باید درنظر گرفت که مربوط به ترتیب زیرمشخصه ها و مسائل ارث بری می‌باشد.

زیر مشخصه های اجباری

در هنگام استفاده از مشخصه font دو زیر مشخصه font-sizeو font-family حتما باید تعیین شود. در غیر اینصورت سایر مقادیر نیز، نادیده گرفته خواهند شد.

زیرمشخصه های اختیاری

زیر مشخصه های دیگر (یعنی همه بجز font-sizeو font-family) اختیاری هستند. اما نکته مهم این است که آنها باید قبل از font-sizeمشخص شوند در غیر اینصورت نادیده گرفته می شوند. مانند:

ارتفاع خطوط: زیر مشخصه line-height نیز اختیاری می باشد و می توان آن را تعیین نکرد. اما در صورتیکه این زیر مشخصه تعیین شود باید بعد از سایز فونت و با استفاده از یک اسلش (/) تعریف شود. مانند:

ارث بری مقادیر اختیاری

نکته بسیار مهم درباره زیر مشخصه هایی که حالت اختیاری دارند این است که اگر با استفاده از مشخصه font برای یک عنصر font تعیین شود اما برخی از مقادیر اختیاری آن تعریف نشود این مقادیر به مقدار اولیه خود ریست می‌شوند و دیگر از والد خود به ارث برده نمی‌شوند. برای مثال:

کلمات کلیدی

جالب است بدانید که برخی کلمات کلیدی نیز وجود دارند که باعث می شوند تا از فونت هایی که سیستم عامل کاربر برای برخی از عناصر رابط کاربری استفاده می کند، برای آن عنصر استفاده شود.

caption, icon, menu, message-box, small-caption, status-bar

مثال: همانطور که مشاهده می کنید از کلمه کلیدی بجای کل مقادیر استفاده شده است 

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

با مراجعه به صفحه مرجع مشخصه های CSSمی توانید لیست کاملی از مشخصه های مربوط به فونت را مشاهده نمائید.

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

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

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

<% errorMessage %>

<% comment.name %>

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

<% reply.name %>

avatar

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

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

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

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

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

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

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