خصوصیت font
مثال (خصوصیت font)
مشخص کردن تمام ویژگی ها در یک تخصیص:
{
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 | تعیین می کند که باید از والدش، ارث بری داشته باشد. |
مثال - خودتان امتحان کنید
Some of the other font property values
در این مثال چند خاصیت دیگر مربوط به فونت نمایش داده شده است.
بیاموزهای مرتبط
Styling Fonts (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10593
دیدگاه‌ها
با سلام
این مقدار inherit چیه که همه جا هست ولی هیچ مثالی براش نیاورده شده
همش در آخر هر آموزشی نوشته که باید از والدش ارث بری داشته باشد
خوب بعضی چیزا نمیتونن ارص بری داشته باشن
با سلام
inherit یکی از خصوصیات تگ فونت است که باعث می شود فرزند خصوصیت والدش را به ارث ببرد :
body{
font-size:18px;
font-family:tahoma;
}
div{
font-size:inherit;
}
< body > test <div> test in div</div></body>
در این مثال هم test و هم test in div سایز 18 خواهند داشت.