ویژگی های font در CSS
انتخاب یک فونت مناسب برای سایت تاثیر زیادی در خوانایی و بازخورد کاربران دارد.
در CSS، ویژگی های مختلفی برای فونت ها وجود دارد:
- font-style: سبک فونت را مشخص می‌کند.
- font-variant: حروف کوچک فونت را به حروف بزرگ تبدیل می‌کند.
- font-weight: وزن فونت را مشخص می‌کند.
- font-size : اندازه فونت را مشخص می‌کند.
- font-family: فونت متن را مشخص می‌کند.
- font-face: تعریف فونت دلخواه در صفحه وب.
- font : خلاصه نویسی تمام ویژگی های فونت است.
- font-stretch: کشیدگی فونت را مشخص می‌کند.
ویژگی font-style در CSS
با ویژگی font-style، سبک فونت را می توان تغییر داد.
برای مثال می‌توان کلمات را به صورت italic نشان داد.
این متن به صورت italic است.
font-style: italic;نکته: برای اطلاعات بیشتر به آموزش ویژگی font-style در CSS مراجعه کنید.
ویژگی font-variant در CSS
با ویژگی font-variant می‌توان حروف کوچک انگلیسی را به حروف نیمه بزرگ تبدیل کرد. این ویژگی دو مقدارزیر را می پذیرد:
- normal: متن های معمولی
- small-caps: متن های نیمه بزرگ
کلمه Ehsan Eslami را در زیر نیمه بزرگ کرده ایم. همانطور که می بینید تمام حروف، نیمه بزرگ شده اند ولی حروف ابتدایی، به صورت کامل بزرگ شده اند.
Ehsan Eslami
font-variant: normal;
font-variant: small-caps;ویژگی font-weight در CSS
ویژگی font-weight، برای تعیین اندازه وزن یک متن استفاده می‌شود.
ویژگی font-weight می‌تواند دو مقدار عددی و حروفی را بپذیرد.
مقادیر عددی شامل:
100 - 200 -300 - 400 - 500 - 600 - 700 - 800 - 900
مقادیر حروفی شامل:
- lighter
- normal: برابر با مقدار 400 (پیش فرض)
- bold: برابر با مقدار 700
- bolder
نکته: به این نکته توجه داشته باشید که برای استفاده از وزن های مختلف، فونت مربوطه باید از وزن پشتیبانی کند.
این یک متن با اندازه متن Bold است.
font-weight: bold;ویژگی font-size در CSS
برای انتخاب اندازه فونت ها از ویژگی font-size استفاده می‌شود.
متن با اندازه فونت 10px
متن با اندازه فونت 25px
font-size: 15px;نکته: برای اطلاعات بیشتر به آموزش ویژگی font-size در CSS مراجعه کنید.
ویژگی font-family در CSS
با ویژگی font-family می توان فونت متن را تغییر داد.
font-family: fantasy;در ویژگی font-family ما با اصطلاح font-fallback (فونت های جایگزین) نیز آشنا می شنویم.
نکته: برای اطلاعات بیشتر به آموزش ویژگی font-family در CSS مراجعه کنید.
دستور font-face در CSS
با استفاده از ویژگی font-face، می توانید فونت دلخواه خود را در صفحه وب تعریف و استفاده کنید.
@font-face {
font-family: "yekan"; /* نام دلخواه */
src: url("assets/yekan.ttf") /* آدرس دهی به فایل فونت */
}
h2 {
font-family: "yekan", "arial"; /* فراخوانی فونت با نام دلخواه */
}نکته: برای اطلاعات بیشتر به آموزش دستور font-face در CSS مراجعه کنید.
font در CSS
ویژگی font، به صورت خلاصه تمام ویژگی های font را مشخص می کند.
font: italic normal 700 18px/1.4 Verdana;نکته: برای اطلاعات بیشتر به آموزش ویژگی font در CSS مراجعه کنید.
ویژگی font-stretch در CSS
برای تعیین میزان کشیدگی متن از ویژگی font-stretch استفاده می‌شود.
font-stretch: normal;نکته: برای استفاده از این ویژگی، فونت مربوطه باید دارای این ویژگی باشد.
احسان اسلامی
