آشنایی با خواص font هنگام کار با متن در زبان CSS
آشنایی با خواص font هنگام کار با متن در زبان CSS
همانطور که گفته بودیم در ادامه ی آموزش خواص متعدد از زبان استایل دهی صفحات وب CSS می خواهیم اینبار به سراغ خواص font برویم و شما را در هنگام کار با متن و نوشته در زبان CSS آشنا کنیم.
از جمله کاربردهای مفیدی که خواص font در CSS برای ما ایرانی ها دارد این است که می توانیم از بین فونت های محبوب خودمان در صفحات وب استفاده کنیم. که برای اینکار باید با خواص font و کدهای تحت این خاصیت کار کنیم.
در ادامه این مطلب می خواهیم شما را با خواص font در هنگام کار با نوشته ها و متن در زبان CSS آشنا کنیم تا از آنها برای فونت دهی به صفحات وب خود استفاده کنید. پس با کدنویسی به زبان ساده همراه باشید.
آشنایی با خواص font در کار با نوشته ها
تعریف : به وسیله مجموعه خواص ارائه شده در این قسمت می توان نوع ، اندازه و جلوه های مختلف را برای قلم نوشته در صفحات وب 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 |
به وسیله این خاصیت می توان از یک لیست آماده ( بر حسب نرم افزاری که برای طراحی صفحات استفاده می کنید ) ، یک قلم را به عنوان قلم نوشته تعیین کنید . نکته : چنانچه نام قلمی در این قسمت ذکر شود و مرورگر در هنگام نمایش صفحه آن قلم را نداشته باشد ، به جای آن از قلم پیش فرض خود استفاده می کند . |
< 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-size :
|
خاصیت font-size |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
font-size |
xx-small |
به وسیله این خاصیت می توان سایز قلم نوشته را توسط یکی از حالت های زیر تعیین کرد : – 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 >
خاصیت font-strecth :
نکته : خاصیت font-strecth را به دلیل عدم پشتیبانی مرورگرهای اینترنت اکسپلورر ، Fire Fox و NetScape حذف کرده ایم.
این خاصیت برای متراکم کردن یا کشیده شدن کلمات در نوشته استفاده می شود.
خاصیت font-style :
|
خاصیت font-style |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
font-style |
normal |
از این خاصیت با استفاده از حالت های زیر می توان برای اعمال جلوه های نمایشی به متن استفاده کرد :
– normal : نوشته بدون هیچ جلوه ای نمایش داده می شود ، که انتخاب پیش فرض است. – italic : نوشته به صورت خط کج نمایش داده می شود. – oblique : نوشته به صورت مورب نمایش داده می شود. |
< 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 >
خاصیت font-variant :
|
خاصیت font-variant |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
font-variant |
normal |
توسط این خاصیت می توان نوشته را به صورت معمولی ( noraml ) و یا حروف بزرگ ( small-caps ) نمایش داد. |
< 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 >
خاصیت font-weight :
|
خاصیت font-weight |
||
|
نام خاصیت |
نوع خاصیت |
شرح |
|
font-weight |
normal |
توسط این گزینه می توان میزان ضخامت قلم نوشته را بر حسب یکی از حالت های زیر تعیین کرد : – normal : میزان ضخامت قلم نوشته به صورت معمولی است ، که انتخاب پیش فرض است . – bold : قلم نوشته به صورت توپر ( ضخیم ) نمایش داده می شود . – bolder : قلم نوشته به صورت خیلی توپر ( ضخیم ) نمایش داده می شود . – lighter : قلم نوشته کمی نازکتر از حالت معمولی نمایش داده می شود . – ۱۰۰ تا ۹۰۰ : توسط این مقدارهای عددی می توان میزان ضخامت نوشته را تعیین کرد ، که هر چه عدد بزرگتر باشد ، ضخامت نوشته بیشتر می شود . |
< 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 > </p>
در این مطلب در ادامه ی سری آموزش های زبان استایل دهی صفحات وب CSS با خواص font آشنا شدید. در ادامه سری آموزش های زبان کاربردی CSS به خواص دیگر آن خواهیم پرداخت.
