استفاده از فونت در HTML – برنامه نویسی HTML بخش یازدهم
فونت در HTML یک نقش مهم را در ایجاد وب سایت هایی با رابط کاربری کاربر پسند بازی می کند و می تواند خوانائی محتواها را تا حد زیادی افزایش دهد. ظاهر فونت (Font Face) و رنگ (Color) می تواند بر حسب رایانه، مرورگر و دیوایسی که کاربر از آن برای دیدن صفحه های وب استفاده می کند تغییر پیدا کند، اما شما می توانید از تگ استفاده کنید تا به صفحه های وب خودتان استایل های ویژه ای مانند اندازه، رنگ و نوع فونت مورد نظرتان را اختصاص دهدی. شما همچنین می توانید از تگ استفاده کنید تا تمام فونت هایی که بر روی یک صفحه وب به کار گرفته اید را از نظر اندازه، ظاهر فونت و رنگ یکسان سازی کنید.
تگ <fonte> در HTML
تگ <fonte>می تواند ظاهر، اندازه و رنگ فونت ها را برای نمایش بر روی مرورگرها تنظیم کند.
تگ <fonte> دارای سه ویژگی size، color و face است که می تواند به شما در شخصی سازی فونت ها کمک کند. برای آن که بتوانید هر کدام از ویژگی های فونت ها را در زمان در صفحه وب خودتان تغییر دهید می توانید به سادگی مقدار هر کدام از این ویژگی ها در تگ Font را تغییر دهید. تمام نوشته های ما بین تگ باز و بسته از ویژگی های تنظیم شده پیروی می کنند. شما می توانید یک یا هر سه ویژگی در تگ Font را در هر زمان تغییر دهید.
استفاده از تگ های font و fontbase در نسخه HTML 5.0 به بعد منسوخ شده است. و حتی در برخی از ورژن ها استفاده از آن ممنوع است زیرا سبب به هم ریختن صفحه وب می شود. با این حال در برخی از نسخه های قدیمی همچنان این تگ وجود دارد. شما می توانید برای استایل دهی به صفحه های وب خودتان از استایل های CSS استفاده کنید و با کمک آن ها فونت های موجود در صفحه وب خودتان را استایل دهی کنید. ما در آموزش های سایت هاست باز توضیحات مفصلی را در زمینه فونت ها در CSS به شما ارائه کرده ایم که می توانید به آموزش های این بخش مراجعه کنید.
تنظیم اندازه فونت در HTML
برای تنظیم کردن اندازه فونت در HTML ما از ویژگی Size در تگ Font استفاده می کنیم. این ویژگی به شما اجازه می دهد که بتوانید اندازه فونت را بین ۱ تا ۷ تنظیم کنیم.و اندازه ۱ نشان دهنده کوچکترین مقدار قابل قبول فونت است و مقدار ۷ نیز درشت ترین مقدار را نشان می دهد. اندازه پیش فرض برای تمام فونت ها بر روی ۳ است.
مثال
در مثالی که در قسمت پائین آمده است ما از ویژگی 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 به صورت نسبی
در زبان HTML می توانید اندازه فونت ها را به صورت نسبی نیز تنظیم کنید. برای این کار می توانید از <“fonte size = “+n >یا <“fonte 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>
تنظیم کرده ظاهر فونت در HTML
شما می توانید ظاهر فونت (Font Face) یا خانواده فونت (Font Family) را با استفاده از ویژگی 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>
تعریف فونت های جایگزین در زبان HTML
یک کاربر تنها در صورتی می تواند نوشته را با ظاهر فونت تعریف شده مشاهده کند که در اینجا فونت بر روی سیستم او نصب شده باشد. بنابراین، شما می توانید یک یا دو فونت را به سیستم معرفی کنید، تا این فونت ها به صورت جایگزین استفاده شوند. برای جدا کردن نام فونت ها با همدیگر می توانید از کاما استفاده کنید.
<font face="arial, helvetica">
<font face="Lucida Calligraphy, Comic Sans MS, Lucida Console">
در زمانی که صفحه وب بارگذاری می شود، مرورگرها در ابتدا ظاهر فونت های در دسترس را نمایش می دهند. اگر هیچکدام از فونت ها بر روی سیستم وجود نداشته باشند، در آن صورت نمایش به صورت فونت پیش فرض (اغلب اوقات Times New Roman) نمایش داده می شود.
تنظیم کردن رنگ فونت در HTML
ما می توانیم رنگ فونت انتخابی نوشته خودمان را با استفاده از ویژگی 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>
عنصر <basefonte> در زبان HTML
عنصر basefont برای تنظیم کردن اندازه، رنگ و ظاهر یک فونت در هر بخش از نوشته که در میان تگ <fonte> به کار رفته است به کار می رود. شما می توانید از عنصر <fonte> برای بازنویسی تنظیمات basefont استفاده کنید که در ادامه با این موضوع آشنا می شوید.
به مانند تگ <basefonte> در تگ <fonte> هم می توانید رنگ، اندازه و ظاهر فونت مورد نظر خودتان را به ترتیب با استفاده از ویژگی های color، size و face تنظیم کنید. البته شما در اینجا می توانید اندازه فونت را به صورت نسبی نیز تنظیم کنید و برای مثال از -۲ و یا +۱ استفاده کنید. با این روش می توانید اندازه فونت را به صورت دلخواه تنظیم کنید.
مثال
در کد 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 <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>
در کد بالا ما چهار خط نوشته را با ظاهر، اندازه و رنگ های مختلف ایجاد کرده ایم.
استفاده از فونت های Web Safe در HTML
در زبان CSS3 شما می توانید از فناوری های سازگار شده بیشتری برای صفحه های وب خودتان استفاده کنید. در این حال در صورتی که فونت شما توسط مرورگر پشتیبانی نشود، در این صورت از فونت هاث Web Safe بهره گرفته می شود. برای اطلاعات بیشتر در این زمینه می توانید به آموزش های CSS در سایت هاست باز مراجعه کنید. ما در آنجا توضیحات مفصلی را برای شما در این زمینه ها ارائه کرده ایم.