همانطور که قول دادم بهتون ،قصد دارم یکسری مقالات در زمینه برنامه نویسی های مختلف ، برای شما عزیزان قرار دهم . پیشاپیش از تمامی مدیران فروم قدردانی میکنم بابت این فروم بسیار مفید و کاربردی.در این قسمت به شما آموزش می دهیم چطور فونت محتواها را در یک صفحه html تنظیم کنید. برای تنظیم فونت ها می توانید از ویژگی های زیر در CSS استفاده کنید:
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>
در مثال زیر می آموزید که چگونه برای ویژگی 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>
ادامه دارد...