ویژگی 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 بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊