Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
کار با تگ فونت (font) و استایل در html
در مطالب قبلی از بخش آموزش مقدماتی html، با مباحث زیادی آشنا شدیم، از تگهای اصلی و کلیدی صفحات وب گرفته تا کار با پاراگراف و متن، اما در این مطلب می خواهیم آموزش ها را با بحث فونت و استایل خطی در html ادامه دهیم، البته بد نیست متذکر شویم که این بخش از آموزش html جنبه کاربردی کمتری دارد، چرا که امروزه بیشتر از css برای تعریف فونت و از استایل خارجی به جای استایل خطی استفاده می کنند، با این حال دانستن مسائل از مقدمات، لازمه گام نهادن به مراحل بالاتر است، لذا اگر می خواهید مباحث را به طور کامل بیاموزید با ادامه آموزش همراه ما باشید.

نحوه تعریف فونت در html
فونت در html به صورت تگ های خطی قابل تعریف است، تگی که برای تعریف فونت استفاده می شود <font> و <font/> هستند، به مثال زیر توجه کنید:

<font>متن داخل تگ فونت</font>

درون این تگ می توان ویژگی هایی را اضافه کرد که عبارتند از ویژگی face، dir، color، lang، size، class و id که به تفصیل راجب آنها خواهیم گفت.

ویژگی face در html font


face در html در واقع عملکردی شبیه عنصر font-family در css دارد، هر دوی این عناصر برای ایجاد و تعریف خانواده ای از فونت ها و نسبت دادن آن به عبارات و متن زیر مجموعه خود کاربرد دارند، چون بحث ما در اینجا آموزش html است، از طرح مبحث css آن خودداری می کنیم و توجه شما را به نحوه به کار بردن این عنصر در مثال زیر جلب می کنیم.

<font face="Tahoma, Geneva, sans-serif">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

مقادیر font face می تواند از خانواده فونت های وب باشد، مثلا مقادیر Arial, Helvetica, sans-serif یا Tahoma, Geneva, sans-serif و...

ویژگی dir در html font


dir برای مشخص کردن جهت نوشتاری حروف به کار می رود، برای حروف از راست به چپ (مثل زبان فارسی) از مقادیر rtl و برای حروف چپ به راست (مثل زبان انگلیسی) از مقادیر ltr استفاده می شود، این ویژگی در css با direction تنظیم می شود.

<font face="Arial, Helvetica, sans-serif" dir="rtl">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی color در html font


برای نسبت دادن رنگ های مختلف به متن داخل تگ font از عنصر color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مثل red، blue، green و ... یا مقادیری به صورت کدهای هگز باشد مثلا 666666# یا 3366CC# و...، این ویژگی نیز در css با نامی مشابه یعنی color قابل تعریف است.

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666">
این یک متن جهت آزمایش نحوه تعریف متن در html است!
</font>

ویژگی lang در html font


از این تگ برای مشخص کردن زبان متنی که در تگ font به کار رفته است استفاده می کنند، البته به کار بردن آن جزء در مواردی استثنایی الزامی نیست، مقادیر آن نیز با استاندارد نماد دو حرفی زبان رسمی کشورها تکمیل می شود. 

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی size در html font


برای تعیین اندازه متن داخل تگ font از عنصر size استفاده می کنند، مقادیر این عنصر به صورت اعداد صحیح معمولا از یک تا هفت (1 2 3 و... 7) و یا به صورت اعداد صحیح به اضافه + از یک تا شش (1+ 2+ 3+ و... 6+) و همچنین به صورت منفی از منفی یک تا منفی 6 (1- 2- 3- و... 6-) قابل تنظیم است، این ویژگی در css با عنصر font-size تعریف می شود.

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی class و id در html font


اکثر تگ های html این قابلیت را دارند که با کدها و استایل های css تنظیم شوند، لذا تگ font نیز از این قاعده مستثنی نیست و همانطور که پیشتر گفتیم، اصولا کار با ویژگی هایی که با css قابل تعریف هستند، به صورت تگ های html کاربردی و مورد قبول نیست (و باید آنها را با css تنظیم نمود)، اما جهت آگاهی از چند و چون کار بد نیست با آنها آشنایی داشته باشیم.

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

استایل خطی در html font


همانطور که پیشتر گفتیم، تگ های html قابلیت استفاده از استایل css را درون خود دارند، استایل های css نیز به سه شیوه قابل تعریف هستند، به صورت خطی و درون تگ html، به صورت غیر خطی اما درون کدهای html و نهایتا به صورت ایمپورت فایل خارجی در صفحه؛ آنچه در این آموزش به آن خواهیم پرداخت، استایل خطی درون تگ های html است.
درون تگ های html استایل خطی را با قرار دادن style و تنظیم مقادیر داخل آن، تعریف می کنند، تمام ویژگی هایی که در css قابل دسترسی هستند، در داخل stlye خطی نیز قابل تعریف شدن است.

<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>

پیش نمایش نحوه تعریف فونت و استایل در html


در زیر کد و پیش نمایشی از آن را جهت آشنایی بیشتر با نحوه استفاده از تگ font و style در html قرار داده ایم که می توانید از آن استفاده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نحوه تعریف فونت و استایل در html</title>
<!-- http://webgoo.ir -->
</head>
<body>
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>
<br />
<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>
</body>
</html>


1394/05/30 4:38:02 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما