قلم و نوشته در CSS :
به وسيله مجوعه خواص ارائه شده در اين قسمت می توان نوع ، اندازه و جلوه های مختلف را برای قلم نوشته در صفحات وب HTML تعيين کرد .
خاصيت font :
خاصيت چند مقداری برای دريافت کليه ويژگی های قلم نوشته است که هر يک از ويژگی ها بايد به ترتيب زير در خاصيت font وارد شود :
نکته : ترتيب قرار گرفتن خواص در خاصيت های چند مقداری به نوع برنامه طراحی سايت بستگی دارد .
font : [ font-family ] [ font-size ] [ font-style ] [ font-variant ] [ font-weight ]
ليست زير مجموعه خواص font در CSS را شامل می شود ، که هر يک را به همراه مثال توضيح داده ايم . برای دريافت اطلاعات درباره هر خاصيت بر روی نام آن کليک کنيد :
font-family
font-size
font-stretch
font-style
font-variant
font-weight
خاصيت font-family :
| خاصيت font-family | ||
| نام خاصيت | نوع خاصيت | شرح |
| font-family | نام قلم font name |
به وسيله اين خاصيت می توان از يک ليست آماده ( بر حسب نرم افزاری که برای طراحی صفحات استفاده می کنيد ) ، يک قلم را به عنوان قلم نوشته تعيين کنيد . نکته : چنانچه نام قلمی در اين قسمت ذکر شود و مرورگر در هنگام نمايش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پيش فرض خود استفاده می کند . |
| مثال font-family | |
| < p style="color: Green; font-family: Arial" > Font of this paragraph is Arial . < /p > < p style="color: Blue; font-family: Times New Roman" > But font of this paragraph is Times New Roman . < /p > |
کد |
|
Font of this paragraph is Arial . But font of this paragraph is Times New Roman . |
خروجی |
خاصيت font-size :
| خاصيت font-size | ||
| نام خاصيت | نوع خاصيت | شرح |
| font-size | xx-small x-small small medium large x-large xx-large smaller larger length درصد % |
به وسيله اين خاصيت می توان سايز قلم نوشته را توسط يکی از حالت های زير تعيين کرد : - xx-small : اندازه قلم بسيار کوچک است . - x-small : اندازه قلم کمی کوچک است . - small : اندازه قلم کوچک است . - medium : اندازه قلم متوسط است . - large : اندازه قلم بزرگ است . - x-large : اندازه قلم کمی بزرگ است . - xx-large : اندازه قلم بسيار بزرگ است . - larger : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی بزرگتر است . - smaller : اندازه قلم نوشته نسبت به ساير خطوط همجوار کمی کوچکتر است . - length :در اين حالت اندازه قلم نوشته را بر حسب واحدی مثل پيکسل ( px ) و يا نقطه ( pt ) تعيين می کنيم . - درصد % : در اين حالت اندازه قلم نوشته را نسبت به عنصر مادر و يا حالت استاندارد ، بر حسب درصد بيان می کنيم . |
| مثال font-size | |
| در مثال زير قسمت های يک پاراگراف با انداره هاي قلم متفاوت نشان داده شده اند : | |
| < p style="color: Maroon; font-family: Arial" > < span style="font-size: small ; color : green" > This part has a small font < /span > < span style="font-size: medium ; color : blue" > This part has a medium font < /span > < span style="font-size: x-large color : red" > This part has a big font < /span > < span style="font-size: 20px; color: Navy" > And size of font of this is 20px . < /span > < /p > |
کد |
|
This part has a small font |
خروجی |
خاصيت font-strecth :
نکته : خاصيت font-strecth را به دليل عدم پشتيبانی مرورگرهای اينترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ايم .
اين خاصيت برای متراکم کردن يا کشيده شدن کلمات در نوشته استفاده می شود .
خاصيت font-style :
| خاصيت font-style | ||
| نام خاصيت | نوع خاصيت | شرح |
| font-style | normal italic oblique |
از اين خاصيت با استفاده از حالت های زير می توان برای اعمال جلوه های نمايشی به متن استفاده کرد : - normal : نوشته بدون هيچ جلوه ای نمايش داده می شود ، که انتخاب پيش فرض است . - italic : نوشته به صورت خط کج نمايش داده می شود . - oblique : نوشته به صورت مورب نمايش داده می شود . |
| مثال font-style | |
| < p style="font-family: Arial" > < span class="g" style="font-size: medium; font-style: italic" > This part has italic text. < /span > < span class="b" style="font-size: medium; font-style: oblique" > And this part has oblique text . < /span > < /p > |
کد |
|
This part has italic text. |
خروجی |
خاصيت font-variant :
| خاصيت font-variant | ||
| نام خاصيت | نوع خاصيت | شرح |
| font-variant | normal small-caps |
توسط اين خاصيت می توان نوشته را به صورت معمولی ( noraml ) و يا حروف بزرگ ( small-caps ) نمايش داد . |
| مثال font-variant | |
| < p style="font-family: Arial" > < span class="g" style="font-variant: normal" > This part has normal text . < /span > < span class="b" style="font-variant: small-caps" > And this part has small-caps text . < /span > < /p > |
کد |
|
This part has normal text. |
خروجی |
خاصيت font-weight :
| خاصيت font-weight | ||
| نام خاصيت | نوع خاصيت | شرح |
| font-weight | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
توسط اين گزينه می توان ميزان ضخامت قلم نوشته را بر حسب يکی از حالت های زير تعيين کرد : - normal : ميزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پيش فرض است . - bold : قلم نوشته به صورت توپر ( ضخيم ) نمايش داده می شود . - bolder : قلم نوشته به صورت خيلی توپر ( ضخيم ) نمايش داده می شود . - lighter : قلم نوشته کمی نازکتر از حالت معمولی نمايش داده می شود . - 100 تا 900 : توسط اين مقدارهای عددی می توان ميزان ضخامت نوشته را تعيين کرد ، که هر چه عدد بزرگتر باشد ، ضخامت نوشته بيشتر می شود . |
| مثال font-weight | |
| < p style="font-family: Arial" > < span class="b" style="font-weight: lighter" > This part has light text . < /span > < span style="color : blue ; font-weight: normal" > This part has normal text . < /span > < span style="color : green ; font-weight: bold" > This part has bold text. < /span > < span style="color : red ; font-weight: 100" > This part has a text with 100 . < /span > < span style="color: Navy; font-weight: 900" > And this part has a text with 900 . < /span > |
کد |
|
This part has light text . |
خروجی |
منبع: دنیای فناوری با حساس کامپیوتر
