فونت‌ها نقش بسیار مهمی در افزایش کاربرپسندی و افزایش خوانایی محتوا در یک وب‌سایت دارند. نوع و رنگ فونت کاملاً به کامپیوتر و مرورگری که برای مشاهده صفحه شما استفاده می‌شود بستگی دارد، اما شما می‌توانید از تگ HTML <font> برای اضافه کردن استیل، اندازه و رنگ به متن در وب‌سایت خود استفاده کنید. همچنین می‌توانید از تگ <basefont> استفاده کنید تا تمام متن‌های خود را به یک اندازه، نوع و رنگ تنظیم کنید.
تگ فونت سه ویژگی به نام‌های اندازه، رنگ و نوع دارد که به شما امکان می‌دهد فونت‌های خود را سفارشی‌سازی کنید. برای تغییر هر یک از ویژگی‌های فونت در هر زمان در صفحه وب‌خود، به سادگی از تگ <font> استفاده کنید. متنی که بعد از این تگ قرار می‌گیرد، تا زمانی که با تگ </font> ببندید، تغییر خواهد یافت. می‌توانید یکی یا تمام ویژگی‌های فونت را در داخل یک تگ <font> تغییر دهید.
توجه: تگ‌های فونت و basefont قدیمی شده‌اند و پیش‌بینی می‌شود که در نسخه‌های آتی HTML حذف شوند. بنابراین باید از آنها استفاده نکرد. به جای آن، پیشنهاد می‌شود از استایل‌های CSS برای تنظیم فونت‌های خود استفاده کنید. اما برای مطالعه، این فصل به تفصیل تگ‌های فونت و basefont را توضیح می‌دهد.
تنظیم اندازه فونت (Set Font Size)
شما می‌توانید اندازه فونت محتوا را با استفاده از ویژگی size تنظیم کنید. محدوده اعداد قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) است. اندازه پیش‌فرض فونت 3 است.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>تنظیم اندازه فونت</title>
</head>
<body>
<font size = "1">اندازه فونت = "1"</font><br />
<font size = "2">اندازه فونت = "2"</font><br />
<font size = "3">اندازه فونت = "3"</font><br />
<font size = "4">اندازه فونت = "4"</font><br />
<font size = "5">اندازه فونت = "5"</font><br />
<font size = "6">اندازه فونت = "6"</font><br />
<font size = "7">اندازه فونت = "7"</font>
</body>
</html>اندازه فونت نسبی (Relative Font Size)
شما می‌توانید مشخص کنید که چند سایز بزرگتر یا کوچکتر از اندازه فونت پیش‌فرض تعیین شده باشد. می‌توانید آن را به این صورت مشخص کنید: <font size = “+n”> یا <font size = “−n”>
مثال
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>تنظیم نوع فونت (Setting Font Face)
شما می‌توانید با استفاده از ویژگی face، چهره فونت را تنظیم کنید، اما توجه داشته باشید که اگر کاربر صفحه را که در حال مشاهده است، فونت را نصب نکرده باشد، قادر به دیدن آن نخواهد بود. به جای این کاربر، فونت پیش‌فرض قابل استفاده در کامپیوتر کاربر را مشاهده خواهد کرد.
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>تعیین نوع‌های جایگزین فونت (Specify alternate font faces)
بازدیدکننده تنها می‌تواند فونت شما را ببیند اگر آن فونت را در کامپیوتر خود نصب کرده باشد. بنابراین، امکان دارد دو یا چند چهره فونت جایگزین را با لیست کردن نام‌های چهره فونت، جدا شده توسط یک کاما مشخص کنید.
<font face = “arial,helvetica”> <font face = “Lucida Calligraphy,Comic Sans MS,Lucida Console”> وقتی صفحه شما بارگذاری می‌شود، مرورگر آنها چهره فونت اول را که در دسترس است نشان خواهد داد. اگر هیچ یک از فونت‌های داده شده نصب نشده باشد، آنگاه چهره فونت پیش‌فرض Times New Roman را نشان می‌دهد.
تنظیم رنگ فونت (Setting Font Color)
شما می‌توانید هر رنگ فونتی که دوست دارید با استفاده از ویژگی color تنظیم کنید. می‌توانید رنگ مورد نظر خود را با نام رنگ یا کد هگزادسیمال آن رنگ مشخص کنید.
توجه − می‌توانید یک لیست کامل از نام‌های رنگ HTML را با کدها بررسی کنید.
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>خاصیت basefont
این بخش نشان‌دهنده یک صفحه HTML است که از تگ‌های فونت مختلف برای تنظیم فونت‌ها استفاده می‌کند. در این مثال، یک عنوان، دو پاراگراف و سه قسمت فونت متفاوت وجود دارد که هر کدام ویژگی‌های مختلفی از جمله رنگ، اندازه و نوع فونت را دارند.
- عنوان صفحه به فونت پیش‌فرض صفحه است.
- قسمت بعدی از فونت darkgray با اندازه +2 استفاده می‌کند.
- در آخرین قسمت از فونت courier با اندازه کوچکتر از پیش‌فرض و رنگ سیاه استفاده شده است.
مثال:
<div class="hcb_wrap" dir="ltr">
<pre class="prism line-numbers lang-html" data-lang="HTML"><code><!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html></code></pre>
</div>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام