آموزش کار با فونت ها در CSS به زبان ساده
همانطور که قول دادم بهتون ،قصد دارم یکسری مقالات در زمینه برنامه نویسی های مختلف ، برای شما عزیزان قرار دهم . پیشاپیش از تمامی مدیران فروم قدردانی میکنم بابت این فروم بسیار مفید و کاربردی.در این قسمت به شما آموزش می دهیم چطور فونت محتواها را در یک صفحه html تنظیم کنید. برای تنظیم فونت ها می توانید از ویژگی های زیر در CSS استفاده کنید:
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
- با استفاده از ویژگی font-family می توان خانواده فونت را مشخص کرد. به عنوان مثال فونت ایران سنس.
- با استفاده از ویژگی font-style می توان فونت را به صورت ایتالیک، نرمال و ابلیک تنظیم کرد.
- ویژگی font-variant برای ساخت ایفکت های small-caps استفاده می شود.
- ویژگی font-weight برای تعیین کردن میزان بولد بودن و لایت بودن ظاهر نوشته ها استفاده می شود.
- ویژگی font-size برای افزایش و کاهش سایز فونت ها مورد استفاده قرار می گیرد.
- ویژگی font برای تعیین موارد بالا به صورت یکجا مورد استفاده قرار می گیرد.
1. تنظیم خانواده فونت
مثالی که در ادامه ذکر می شود به شما نشان می دهد که چگونه خانواده فونت محتوا را تنظیم کنید:
<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>
2. تنظیم سبک فونت
در مثال زیر یاد می گیرید که چگونه سبک یک فونت را تنظیم کنید. برای ویژگی font-style سه ویژگی normal ، italic و oblique می توانید تنظیم کنید.
<html>
<head>
</head>
<body>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>
3. تنظیم ویژگی font-variant
در مثال زیر می آموزید که چگونه برای ویژگی font-variant مقدار قرار دهید. مقادیر ممکن برای این ویژگی عبارتند از normal و small-caps.
<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
</body>
</html>
نتیجه کد بالا به صورت زیر خواهد بود:
4. تنظیم وزن فونت
در مثال بعد به شما یاد می دهیم که وزن فونت را برای یک تگ تنظیم کنید.ویژگی font-weight این قابلیت را برای شما فراهم کرده است که تعیین کنید(این قسمت را در مقاله آموزش HTML از 0 تا 100 طراحی قالب حرفه ای جهت ورود به بازار کار بررسی خواهیم کرد) یک فونت چقدر بولد باشد. مقادیر ممکن برای این ویژگی عبارتند از : normal ، bold ، bolder ، lighter ، 100 ، 300، 400 ، 500 ، 600 ، 700 ، 800 و 900 .
<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>
5. تنظیم اندازه فونت
در مثالی که در ادامه می آوریم به شما یاد می دهیم که اندازه یک فونت را چگونه تنظیم کنید.مقادیر ممکن برای این ویژگی عبارتند از xx-small ، x-small ، small ، medium ، large ، x-large ، xx-large ، smaller ، larger و اندازه به پیکسل یا درصد.
<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>
6. تنظیم ویژگی font size adjust
در ادامه با یک مثال به شما نشان می دهیم که چگونه اندازه فونت یک تگ را تعدیل کنید. این ویژگی شما را قادر می سازد که اندازه x-height را تعدیل کنید تا به این طریق فونت ها را خوانا تر کنید. مقادیر ممکن برای این ویژگی هر عددی می تواند باشد.
<html>
<head>
</head>
<body>
<p style="font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>
</body>
</html>
7. تنظیم کشیدگی فونت
در مثال بعد به شما آموزش می دهیم که چگونه کشیدگی فونت یک تگ را تنظیم کنید. این ویژگی به کامپیوتر کاربر بستیگی دارد که آیا ورژن گسترده یا متراکم فونت مورد استفاده قرار گیرد.
مقادیر ممکن برای این ویژگی عبارتند از : normal ، wider ، narrower ، ultra-condensed ، extra-condensed ، condensed ، semi-condensed ، semi-expanded ، expanded ، extra-expanded ، ultra-expanded.
<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
condensed or expanded version of the font being used.
</p>
</body>
</html>
8. ویژگی font
شما می توانید از ویژگی font استفاده کرده تا همه ویژگی های فونت را به صورت یکجا تنظیم کنید. به مثال زیر توجه کنید:
<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>
ادامه دارد...