ویژگی font در CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 21 بهمن 1399در این مقاله با ویژگی font در CSS آشنا می شویم.
نحوه تغییر قلم در CSS
با استفاده از ویژگی font در CSS ، می توانید مجموعه ای از مقدار را برای قلم متن تعریف کنید:
p.arial-font {
font: 14px arial, sans-serif;
}
p.georgia-font {
font: italic bold 16px/32px Georgia, serif;
}
این ویژگی در واقع خلاصه ای برای هفت زیر مالکیت است:
- کشش قلم
- نوع قلم
- نوع قلم
- وزن قلم
- اندازه فونت
- ارتفاع خط
- font-family
بررسی یک ظاهر طراحی شده متن CSS
برای استفاده از قلم CSS ، باید زیر خاصیت ها را به ترتیب خاصی تعریف کنید:
قلم: نوع سبک اندازه خانواده / خط ارتفاع خانواده ؛
تنها مقادیری که باید برای تعیین ویژگی های قلم CSS تعیین کنید اندازه و خانواده است. مقادیر دیگر اختیاری هستند: اگر آن ها را رد کنید ، مقادیر پیش فرض به جای آن استفاده می شود.
Explanation | Default value | Value |
متراکم یا کشیده شده متن را مشخص می کند | normal | stretch |
اریب یا مورب بودن متن را مشخص می کند | normal | style |
اگر متن با حروف کوچک باشد را مشخص می کند | normal | variant |
ضخامت کاراکترها را مشخص می کند | normal | weight |
قد شخصیت ها را مشخص می کند | medium | size |
ارتفاع فضای خالی بین خطوط متن را تعریف می کند | normal | line-height |
قلم را برای کاراکترها تعریف می کند | Depends on the browser | family |
توجه: ارتفاع خط باید بعد از اندازه قلم با یک برش رو به جلو بین این دو مقدار تعریف شود (به عنوان مثال ، 20px / 20px).
استفاده از کلمات کلیدی برای قلم های CSS
به جای تعریف هر زیر خاص ، می توانید از کلمات کلیدی برای تنظیم سبک های قلم CSS استفاده کنید:
<ul>
<li style="font: caption;">Captioned Control Font.</li>
<li style="font: icon;">Icon Label Font.</li>
<li style="font: menu;">Dropdown Menu Font.</li>
<li style="font: message-box;">Dialogue Box Font.</li>
<li style="font: small-caption;">Smaller Caption Font.</li>
<li style="font: status-bar;">Status Bar Font.</li>
</ul>
تمام مقادیر موجود را در جدول زیر پیدا کنید:
Description | Value |
قلم های CSS که برای کنترل های زیرنویس مانند کنترل ها و دکمه ها استفاده می شود | caption |
نسخه کوچکتر از قلم زیرنویس | small-caption |
قلم های CSS که برای برچسب آیکون استفاده می شود | icon |
قلم های CSS که برای منوهای مختلف استفاده می شود | menu |
قلم های CSS مورد استفاده برای جعبه های گفتگو | message-box |
قلم های CSS که برای میله های وضعیت پنجره استفاده می شود | status-bar |
پشتیبانی از مرورگر
این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟