آموزش CSS - صفت FONT

          mahdi 
            بازدید : 64
          چهارشنبه 25 مرداد 1391
           نظرات (0)
        

صفت FONT

با این صفت می توانید ویژگیهای قلم ، نوع قلم ، اندازه ، رنگ و استایل متن را تغییر دهید . صفت font هم دارای نوع هار متفاوتی از لحاظ کاربرد می باشد که در ادامه به طور کامل برای شما توضیح میدهم .
شما در فایل css خود می توانید فقط با نوشتن font تمام ویژگیهای آن مانند اندازه ، نوع قلم ، رنگ و ... را تعیین کنید اما اینکار پیشنهاد نمی شود بدلیل اینکه خوانایی کدهای css شما را تا حد قابل ملاحضه ای کم می کند به همین دلیل انواع صفت font را برای شما توضیح می دهم .

font-family :
fony-size :
font-style :
font-stretch :
font-variant :
font-weight :

صفت font-family
همانطور که میدانید مرورگرها از یک سری فونت استاندارد پشتیبانی می کننده یعنی شما در طراحی صفحات خودتان اگر از فونت نازنین استفاده کنید مرورگرها فونت شما را نشناخته و از فونت پیش فرض استفاده می کنند . برای اینکه متن های قالب شما از یک فونت در صفحه استفاده کنند از صفت font-family استفاده میکنیم .

به مثال زیر توجه کنید .

p.font1
{
font-family : tahoma ;
}
p.font2
{
font-family : arial ,tahoma ;
}

مشاهده دمو

صفت font-size
برای مشخص کردن اندازه متن در قالب وب سایت از صفت font-size استفاده می شود. شما می توانید اندازه قلم خود را با پیکسل ، درصد ،pt مشخص کنید .برای اینکه متوجه بشوید ،
به مثال زیر توجه کنید .

p.font1
{
font-size : 12px ;
}
p.font2
{
font-size : 20pt ;
}
p.font3
{
font-size : 100% ;
}

مشاهده دمو

صفت font-style
برای مشخص کردن استایل فونت از font-style استفاده می کنیم.که دارای سه مقدار italic | inherit |oblique می باشد
به مثال زیر توجه کنید .

p.font1
{
font-style : italic ;
}
p.font2
{
font-style : inherit ;
}
p.font3
{
font-style : oblique ;
}

مشاهده دمو

p.font1
{
font-stretch : inherit ;
}
p.font2
{
font-stretch: semi-expanded ;
}
p.font3
{
font-stretch: semi-condensed ;
}

مشاهده دمو

صفت font-variant
نمایش متن در حالت small-caps یا normal را تعیین میکند. این ویژگی زیاد در زبان فارسی کاربرد ندارد

صفت font-weight
با این صفت می توانید عرض فونت را مشخص کنید .دارای ویژگیهای100.200.300.400.500.600.700.800.900| Normal | bold | bolder |lighter می باشد.
به مثال زیر توجه کنید .

p.font1
{
font-weight : 100 ;
}
p.font2
{
font-weight : bold ;
}
p.font3
{
font-weight: bolder ;
}

مشاهده دمو

منبع

ارسال نظر برای این مطلب