در این مقاله ی آموزشی، نحوه ی استفاده ی صحیح از فونت ها را در اسناد html، آموزش خواهیم داد. استفاده از فونت ها در طراحی صفحات وب، از اهمیت بالایی برخوردار هست. علت این اهمیت در زیبایی، کارآیی و انعطاف پذیری طراحی ها نهفته است.
فونت ها در html
- در HTML از تگ <font> نباید استفاده شود.
- تگ font در Html4 نامناسب شناخته شده و از HTML5 حذف شده است.
- کنسرسیوم جهانی وب (W3C) تگ font را از لیست توصیه هایش حذف کرده است.
- در HTML4 ، در شیوه نامه های(CSS) باید برای تعریف طرح بندی و نمایش خواص ، از بسیاری از عناصر خود استفاده کنند.
مثال زیر چگونگی استفاده از تگ <font> را نشان می دهد:
[html]
<html>
<body>
<p><"font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p><font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
<p>The font element is deprecated in HTML 4. Use CSS instead!</p>
</body>
</html>
[/html]
که نتیجه بدین صورت است:
تنظیم فونت متن :
این مثال چگونگی تنظیم فونت یک متن را نشان می دهد:
[html]
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
[/html]
نتیجه کد بالا به این صورت است:
:تنظیم اندازه فونت متن
این مثال چگونگی تنظیم اندازه فونت یک متن را نشان می دهد:
[html]
<html>
<body>
<h1 style="font-size:200%">This is a heading</h1>
<p style="font-size:110%">This is a paragraph.</p>
</body>
</html>
[/html]
نتیجه کد بالا به این صورت است:
:تنظیم رنگ فونت متن
این مثال چگونگی تنظیم رنگ فونت یک متن را نشان می دهد:
[html]
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
[/html]
نتیجه کد بالا به این صورت است: