ویژگی های 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 - bold - 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;نکته: برای استفاده از این ویژگی، فونت مربوطه باید دارای این ویژگی باشد.
خلاصه درس
در این درس با ویژگی فونت در CSS:
- ویژگی font-style
- ویژگی font-variant
- ویژگی font-weight
- ویژگی font-size
- ویژگی font-family
- دستور font-face
- ویژگی font
- ویژگی font-stretch
آشنا شدیم.
احسان اسلامی
