خصوصیت font

مثال

مشخص کردن تمام ویژگی ها در یک تخصیص:

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

تعریف و کاربرد

با استفاده از خاصیت مختصر شده font، می توانیم تمام ویژگی های مربوط به فونت را در یک تخصیص، تنظیم کنیم.

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

 "font-style font-variant font-weight font-size/line-height font-family"

مقادیر مربوط به font-size و font-family اجباری هستند. اگر مقادیر مربوط به سایر خاصیت ها، از قلم بیفتد، مقدار پیش فرض (در صورت وجود) برای آن لحاظ می شود.

توجه: خاصیت line-height فاصله بین خطوط را تنظیم می کند.

مقدار پیشفرض مشخص نشده
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.font="italic small-caps bold 12px arial,sans-serif"

پشتیبانی مرورگرها

    

تمام مرورگرهای اصلی، خصوصیت font را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم خاصیت font برای یک عنصر را پشتیبانی نمی کند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

Font Properties

Property/مقدار توضیحات
font-style Style یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-style مراجعه فرمایید.
font-variant کوچک یا بزرگ بودن حروف را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به  font-variantمراجعه فرمایید.
font-weight ضخامت یک فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-weight مراجعه فرمایید.
font-size/line-height اندازه یک فونت و فاصله بین خطوط را مشخص می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-size و line-height مراجعه فرمایید.
font-family نام فونت را تنظیم می کند. برای اطلاعات بیشتر و مشاهده مقادیر ممکن به font-family مراجعه فرمایید.
caption

از فونتی استفاده می کند که توسط کنترلهای caption به کار رفته است. (کنترلهای caption مانند Button و Drop-Down و غیره)
icon از فونتی استفاده می کند که توسط آیکن به کار گرفته شده است.
menu از فونتی استفاده می کند که توسط منوی پایین افتادنی استفاده شده است.
message-box از فونتی استفاده می کند که توسط پنجره پیغام استفاده شده است.
small-caption

یک ورژن کوچکتری از فونت caption
status-bar

از فونتی استفاده می کند که توسط نوار وضعیت استفاده شده است.
inherit تعيين مي کند که بايد از والدش، ارث بري داشته باشد.