آموزش HTML - فونت ها

فونت‌های HTML نقش مهمی در کاربرپسندتر کردن وب‌سایت و افزایش خوانایی محتوا ایفا می‌کنند. نوع فونت (Font face) و رنگ آن کاملاً به رایانه و مرورگری بستگی دارد که برای مشاهده صفحه شما استفاده می‌شود، اما می‌توانید از تگ <font> در HTML برای افزودن استایل، اندازه و رنگ به متن‌های وب‌سایت خود استفاده کنید. همچنین می‌توانید از تگ <basefont> برای تنظیم تمام متن‌های خود روی یک اندازه، نوع فونت و رنگ یکسان استفاده نمایید.

تگ <font> در HTML

تگ <font> در HTML اندازه، رنگ و نوع فونت (خانواده فونت) متنی را که قرار است در صفحه وب نمایش داده شود، مشخص می‌کند.

تگ <font> دارای سه ویژگی به نام‌های size، color و face برای سفارشی‌سازی فونت‌های شماست. برای تغییر هر یک از ویژگی‌های فونت در هر زمان از صفحه وب خود، کافی است از تگ <font> به همراه نام‌ها و مقادیر ویژگی‌ها استفاده کنید. متن بعدی تا زمانی که با تگ </font> آن را نبندید، به صورت تغییریافته باقی می‌ماند. شما می‌توانید یک یا همه ویژگی‌های فونت را درون یک تگ <font> تغییر دهید.

تگ‌های font و basefont منسوخ شده‌اند (deprecated) و قرار است در نسخه‌های آینده HTML حذف شوند. بنابراین نباید از آن‌ها استفاده شود؛ در عوض، پیشنهاد می‌شود برای مدیریت فونت‌های خود از استایل‌های CSS استفاده کنید. با این حال، جهت اهداف آموزشی، این فصل تگ‌های font و basefont را با جزئیات توضیح خواهد داد.

تنظیم اندازه فونت

برای تنظیم اندازه فونت یک صفحه وب، از ویژگی size استفاده می‌کنیم. این ویژگی به ما اجازه می‌دهد اندازه فونت را بین 1 تا 7 تنظیم کنیم که در آن 1 کوچک‌ترین اندازه فونت و 7 بزرگ‌ترین است. اندازه پیش‌فرض یک فونت 3 می‌باشد.

مثال

مثال زیر نحوه استفاده از ویژگی "size" در تگ <font> را برای تنظیم اندازه فونت نشان می‌دهد:

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <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><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

اندازه فونت نسبی

در HTML، اندازه فونت نسبی به معنای مشخص کردن این است که متن باید چند سایز بزرگ‌تر یا کوچک‌تر از اندازه فونت ازپیش‌تنظیم‌شده باشد. ما می‌توانیم آن را به صورت <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>

تنظیم نوع فونت (Font Face)

شما می‌توانید نوع فونت (خانواده فونت) را با استفاده از ویژگی 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>

مشخص کردن فونت‌های جایگزین

یک بازدیدکننده تنها در صورتی می‌تواند فونت شما را ببیند که آن فونت روی رایانه‌اش نصب شده باشد. بنابراین، می‌توانیم با فهرست کردن نام فونت‌ها و جدا کردن آن‌ها با کاما، دو یا چند فونت جایگزین مشخص کنیم.

<font face = "arial, helvetica">
<font face = "Lucida Calligraphy, Comic Sans MS, Lucida Console">

هنگامی که صفحه شما بارگیری می‌شود، مرورگر آن‌ها اولین فونت در دسترس را نمایش می‌دهد. اگر هیچ یک از فونت‌های داده شده نصب نشده باشند، فونت پیش‌فرض یعنی Times New Roman را نمایش خواهد داد.

تنظیم رنگ فونت

ما می‌توانیم با استفاده از ویژگی color، هر رنگ دلخواهی را برای فونت متن‌ها تنظیم کنیم. برای مشخص کردن رنگ، می‌توانیم از نام رنگ یا کد شانزده‌شانزدهی (Hexadecimal) آن رنگ استفاده کنیم.

توجه − می‌توانید لیست کامل نام رنگ‌های 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>

عنصر <basefont> برای تنظیم اندازه، رنگ و نوع فونت پیش‌فرض برای بخش‌هایی از سند استفاده می‌شود که در تگ <font> قرار نگرفته‌اند. شما می‌توانید از عناصر <font> برای بازنویسی تنظیمات <basefont> استفاده کنید.

تگ <basefont> نیز همانند تگ <font>، ویژگی‌های color، size و face را می‌پذیرد و با دادن مقدار +1 برای یک سایز بزرگ‌تر یا -2 برای دو سایز کوچک‌تر به size، از تنظیمات نسبی فونت پشتیبانی می‌کند.

مثال

در کد HTML زیر، نحوه استفاده از تگ "basefont" را نشان می‌دهیم:

<!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 &lt;basefont&gt; 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>

کد HTML بالا چهار خط متن با نوع فونت، رنگ و اندازه‌های مختلف تولید خواهد کرد.

استفاده از فونت‌های امن وب (Web Safe) در HTML

فناوری CSS3 تکنولوژی ترکیب فونت‌ها را به کار گرفته است. اگر مرورگر از اولین فونت پشتیبانی نکند، فونت بعدی را امتحان می‌کند. در اینجا لیستی از فونت‌های امن وب در CSS آورده شده است.

مرجع فونت‌های HTML

برای مطالعه بیشتر درباره فونت‌های HTML، مراجعه کنید به: مرجع فونت‌های HTML