آموزش فونت ها در CSS
آموزش فونت ها در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فونت ها در CSS خواهیم پرداخت.
در این درس نحوه تنظیم فونت های یک محتوا، موجود در یک عنصر HTML به شما آموزش داده می شود. می توانید ویژگی های فونت زیر را برای یک عنصر تنظیم کنید –
- از ویژگی font-family برای تغییر چهره قلم استفاده می شود.
- از ویژگی font-style برای ساخت مورب یا مورب قلم استفاده می شود.
- از ویژگی font-variant برای ایجاد حروف کوچک استفاده می شود.
- از ویژگی font-weight برای افزایش یا کاهش میزان ضخیم یا نازک بودن قلم استفاده می شود.
- از ویژگی font-size برای افزایش یا کاهش اندازه قلم استفاده می شود.
- از ویژگی font به عنوان مختصر برای تعیین تعداد دیگری از خصوصیات فونت استفاده می شود.
تنظیم font-family
در زیر مثالی آورده شده است ، که نحوه تنظیم font-family یک عنصر را نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 |
This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. |
تنظیم font-style
در زیر مثالی آورده شده است که نحوه تنظیم font-style یک عنصر را نشان می دهد. مقادیر احتمالی طبیعی، مورب و مایل است.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "font-style:italic;"> This text will be rendered in italic style </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 |
This text will be rendered in italic style |
تنظیم font-variant
مثال زیر نحوه تنظیم font-variant یک عنصر را نشان می دهد. مقادیر احتمالی نرمال و کوچک است.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "font-variant:small-caps;"> This text will be rendered as small caps </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 |
This text will be rendered as small caps |
تنظیم font-weight
مثال زیر نحوه تنظیم font-weight یک عنصر را نشان می دهد. ویژگی font-weight برای تعیین میزان پررنگ بودن یک قلم قابلیت ارائه می دهد. مقادیر ممکن است طبیعی، پررنگ، پررنگتر، کمرنگ تر ، 100 ، 200 ، 300 ، 400 ، 500 ، 600 ، 700 ، 800 ، 900 باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> </head> <body> <p style = "font-weight:bold;"> This font is bold. </p> <p style = "font-weight:bolder;"> This font is bolder. </p> <p style = "font-weight:500;"> This font is 500 weight. </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 2 3 4 5 |
This font is bold. This font is bolder. This font is 500 weight. |
تنظیم font-size
مثال زیر نحوه تنظیم font-size یک عنصر را نشان می دهد. از ویژگی font-size برای کنترل اندازه قلم ها استفاده می شود. مقادیر ممکن استxx-small ،x-small ، small ، medium ، large ، x-large ، xx-large اندازه در پیکسل یا٪ باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> </head> <body> <p style = "font-size:20px;"> This font size is 20 pixels </p> <p style = "font-size:small;"> This font size is small </p> <p style = "font-size:large;"> This font size is large </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 2 3 4 5 |
This font size is 20 pixels This font size is small This font size is large |
تنظیم اندازه فونت
مثال زیر نحوه تنظیم اندازه قلم یک عنصر را نشان می دهد. این ویژگی شما را قادر می سازد تا x-height را برای خوانایی بیشتر فونت ها تنظیم کنید. مقدار ممکن هر عددی باشد
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 |
This text is using a font-size-adjust value |
تنظیم Font Stretch
مثال زیر نحوه تنظیم کشش فونت یک عنصر را نشان می دهد. این ویژگی برای داشتن نسخه منبسط یا فشرده فونت مورد استفاده، به رایانه کاربر متکی است.
مقادیر احتمالی می توانند normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded باشند.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> </head> <body> <p style = "font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a <br>condensed or expanded version of the font being used. </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 2 |
If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used. |
Shorthand Property
می توانید از ویژگی font برای تنظیم همه خصوصیات قلم به طور هم زمان استفاده کنید. به عنوان مثال –
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> </head> <body> <p style = "font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once. </p> </body> </html> |
نتیجه زیر را ایجاد می کند:
|
1 |
Applying all the properties on the text at once. |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما