آموزش جامع و كاربردي كدنويسي استايل شت,css - قسمت يازدهم - فونت
در این قسمت در مورد تنظیم Font صفحه توضیح داده میشهfont-family
ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد،اما معمولاً Times New Roman است.
در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:
کد:
کد:
<div style=”font-family: Arial”>این متن با فونت Arial نمایش داده می شود.</div>
البته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظرشما را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده میکند. برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید کهمعمولاً به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند.
برای مثال فونت مورد استفاده ما در سایت Tahoma میباشدfont-size
این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.
فرض کنید می خواهیم متن درون یک DIV با اندازه ۳۰ پیکسل نمایش داده شود:
کد:
کد:
<div style=”font-size: ۳۰px”>این متن با اندازه ۳۰ پیکسل نمایش داده می شود.</div>
font-style
کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چوناستفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفادهشود.این ویژگی می تواند مقادیر زیر را داشته باشد: normal
italic
oblique
به یک مثال در مورد این ویژگی توجه کنید:
کد:
کد:
<div style=”font-style:oblique”>این متن به صورت مورب مشاهده می شود.</div>
font-weight
این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم: normal
bold
bolder
lighter
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰
در اینجا به ذکر یک مثال می پردازیم
کد:
:
کد:
<div style=”font-weight: ۷۰۰″>این متن تقریباً ضخیم مشاهده می شود.</div>
کد ها را حتما با مقادیر مختلف امتحان کنید
