دوشنبه ۱۴ آذر ۱۴۰۱

Monday, December 5, 2022 GMT +3:30

کاربرد تگ font و ویژگی های فونت در HTML

html-font-tag

در مطالب قبل از بخش آموزش مقدماتی HTML با مباحثی از این زبان پایه کدنویسی وب آشنا شدیم، از تگ های اصلی و کلیدی تا فرمت بندی و کار با متن و پاراگراف، در ادامه آموزش ها در این مطلب می خواهیم با کاربرد تگ font و ویژگی های فونت در HTML آشنا شویم، متذکر می شویم که این بخش از سری آموزش های مقدماتی HTML جنبه کاربردی کمتری دارد چرا که امروزه برنامه نویسان وب بیشتر از زبان CSS برای تعریف فونت و ویژگی های آن استفاده می کنند و در کل توصیه شده تا خاصیت هایی که به ظاهر عناصر مربوط می شوند تا حد امکان با استایل CSS تعریف شوند، به هر صورت دانستن مسائل از مقدمات لازمه گام نهادن به مراحل بالاتر است لذا اگر بخواهیم تمام مباحث HTML را پوشش دهیم ناگزیر از طرح مبحث فونت خواهیم بود، برای کاربردی بودن آموزش نگاهی نیز خواهیم داشت به CSS و نحوه تعریف فونت در این زبان استایل نویسی.

نکته مهم: تگ font در HTML نسخه 5 حذف شده و پشتیبانی نمی شود، در صورت استفاده از تگ font در سند HTML 5 خطای زیر را به لحاظ اعتبارسنجی سرویس validator.w3.org دریافت خواهیم کرد:
The font element is obsolete. Use CSS instead.
در این نسخه الزاما باید از CSS برای تعریف فونت استفاده کنیم، لذا آموزش حاضر برای کاربرانی که صرفا با HTML نسخه جدید و به روز سر و کار دارند اختیاری می باشد!

نحوه تعریف تگ font در HTML


فونت در HTML ماقبل نسخه 5 به صورت تگ قابل تعریف است، تگی که برای تعریف فونت استفاده می شود با همین نام font و به صورت جفتی است، به طور مثال:
<font>متن داخل تگ فونت</font>
ویژگی هایی را که می توانیم به این تگ اضافه کنیم عبارتند از face، dir، color، lang، size، class و id که در ادامه به تفصیل در مورد آنها خواهیم گفت.

ویژگی face در HTML font


ویژگی face در HTML عملکردی معادل خاصیت font-family در CSS دارد، هردوی این عناصر برای ایجاد و تعریف خانواده ای از فونت ها و نسبت دادن آن به عبارت و متن مورد نظر کاربرد دارند، در مثال زیر نحوه استفاده از این خاصیت در دو حالت HTML و CSS درج شده است، همان طور که گفتیم امروزه استفاده از تگ font در HTML نسخه 5 امکانپذیر نیست و باید از CSS بدین منظور استفاده کنیم:
<font face="Tahoma, Geneva, sans-serif">
این متن جهت آزمایش نحوه تعریف فونت در HTML است!
</font>

<style>
p {
    font-family: Tahoma, Geneva, sans-serif;
}
</style>
<p>این متن جهت آزمایش نحوه تعریف فونت در CSS است!</p>
مقادیر 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">
این متن جهت آزمایش نحوه تعریف ویژگی dir فونت در HTML است!
</font>

<style>
p {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
}
</style>
<p>این متن جهت آزمایش نحوه تعریف ویژگی direction فونت در CSS است!</p>

ویژگی color در HTML font


برای نسبت دادن رنگ های مختلف به متن درون تگ font در نسخه های ماقبل 5 HTML از ویژگی color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مانند red، blue، green و یا مقادیری به صورت کدهای هگز باشد به طور مثال 666666# یا 3366CC# و...، این ویژگی نیز در CSS با نامی مشابه یعنی color قابل تعریف است:
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#2B74D7">
این متن جهت آزمایش نحوه تعریف ویژگی color فونت در HTML است!
</font>

<style>
p {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    color: #2B74D7;
}
</style>
<p>این متن جهت آزمایش نحوه تعریف ویژگی color فونت در CSS است!</p>

ویژگی lang در HTML font


از این ویژگی در HTML نسخه های ماقبل 5 برای مشخص کردن زبان متنی که در تگ font به کار رفته است استفاده می شود، البته به کار بردن آن جزء در مواردی استثنایی الزامی نیست، مقادیر lang با استاندارد نماد دو حرفی زبان رسمی کشورها تکمیل می شود:
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa">
این متن جهت آزمایش نحوه تعریف ویژگی lang فونت در HTML است!
</font>
نکته 1: ویژگی lang کاربرد و معادلی در زبان CSS ندارد!
نکته 2: بر اساس توصیه های کنسرسیوم جهانی وب (W3C) در HTML نسخه 5 باید مقدار lang به صورت پارامتر برای تگ html در ابتدای سند تعریف شود، به فرض:
<!DOCTYPE html>
<html lang="fa">
<head>
.
.
.
</head>
<body>
.
.
</body>
</html>

ویژگی size در HTML font


برای تعیین اندازه متن درون تگ font در HTML نسخه های ماقبل 5 از ویژگی 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">
این متن جهت آزمایش نحوه تعریف ویژگی size فونت در HTML است!
</font>

<style>
p {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    color: #666666;
    font-size: 12px;
}
</style>
<p>این متن جهت آزمایش نحوه تعریف ویژگی font-size فونت در CSS است!</p>

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


اکثر تگ های HTML این قابلیت را دارند که به لحاظ جلوه های ظاهری با استایل CSS تنظیم شوند، تگ font نیز از این قاعده مستثنی نیست و همانطور که پیشتر گفتیم در استانداردهای جدید توصیه شده قابلیت هایی را که هم با خاصیت های CSS و هم با خاصیت های HTML قابل تعریف هستند صرفا با CSS اعمال کنیم، در هر حال جهت آگاهی از چند و چون کار در نمونه زیر اشاره ای داریم به نحوه استفاده از class و id بر روی تگ font در نسخه های ماقبل HTML 5:
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" id="your-id" class="your-class">
این متن جهت آزمایش نحوه تعریف class و id فونت در HTML است!
</font>
در HTML نسخه 5 تگ font حذف شده و باید به سایر تگ هایی که متن درون آنها درج می شود (مانند p، div و...) class و id را نسبت دهیم:
<style>
.text {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    color: #666666;
    font-size: 12px;
}
</style>
<p class="text">این متن جهت آزمایش نحوه تعریف class و id فونت در CSS است!</p>
در خصوص نحوه تعریف و کاربردهای class و id در آموزش های مقدماتی CSS به صورت جداگانه و مفصل صحبت خواهیم کرد، فعلا در همین حد بدانیم که این ویژگی ها برای تگ font قابل اعمال هستند.

پیش نمایش ویژگی های فونت در HTML و استایل CSS


برای جمع بندی آموزش کاربرد تگ font و ویژگی های فونت در HTML در نمونه کد زیر به کمک استایل CSS خاصیت هایی را که با هم بررسی کردیم به تگ های HTML نسبت داده ایم که می توانیم پیش نمایش آنلاین آن را تست و بررسی کنیم.
نکته: با توجه به اینکه تگ font در HTML نسخه 5 منسوخ و حذف شده است، لذا در این نمونه کد بر شیوه توصیه شده جدید و استفاده از CSS تاکید داشته ایم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ویژگی های فونت در HTML و استایل CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    direction: rtl;
}
div {
    font-family: Tahoma, Geneva, sans-serif;
    direction: ltr;
    color: #B70F12;
    font-size: 14px;
}
#your-id {
    font-family: sans-serif, Tahoma, Geneva;
    direction: rtl;
    color: #800BBC;
    font-size: 16px;
}
.your-class {
    font-family: Tahoma, Geneva, sans-serif;
    direction: rtl;
    color: #666666;
    font-size: 12px;
}
.ltr {
    direction: ltr;
}
</style>
</head>
<body>
<div>This text is for testing how to define font direction properties in HTML & CSS!</div>
<p id="your-id">این متن جهت آزمایش نحوه تعریف id فونت در HTML و CSS است!</p>
<p class="your-class">این متن جهت آزمایش نحوه تعریف class فونت در HTML و CSS است!</p>
<hr>
در مثال بالا به ترتیب (از چپ به راست) تاکید بر روی استفاده از <span class="ltr">direction, id, class</span> است.
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
آشنایی با مفهوم Semantic در HTML
کار با تگ های ایجاد کننده لیست در HTML
کار با تگ فرم (form) در HTML
نحوه ایجاد لینک در HTML
لایه بندی در HTML با تگ div و span
دیدگاه
more ۱۷ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
مهدی
۱۹:۴۶ ۱۳۹۸/۱۰/۲۸
سلام من مهدی هستم. چجوری باید برای سایتی که ساختم آدرس بسازم که وقتی در سرچ گوگل بنویسیم برایمان بیاورد.
برای ساخت سایت باید یک دامنه (آدرس اینترنتی) خریداری و ثبت نمائید، سپس این آدرس را به یک فضای میزبانی وب که معمولا از شرکت های هاستینگ خریداری می شود متصل کرده و برنامه سایت (به فرض وردپرس) را در آن بارگذاری کنید، در نهایت با تبادل لینک در فضای وب یا ثبت سایت در ابزار وبمستر گوگل می توانید سایتتان را به این موتور جستجو معرفی کنید، در مورد وبلاگ فرآیند خرید دامنه و هاست نیازی نیست و کافی است با وبلاگ های مرتبط تبادل لینک داشته باشید یا آدرس وبلاگ را در ابزار وبمستر گوگل ثبت کنید، پس از مدت زمانی (بین 1 تا چند ماه) مطالب شما در گوگل قابل جستجو هستند.
آیدا
۱۷:۴۶ ۱۴۰۱/۰۷/۱۹
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
سوالتان مبهم است، اگر منظور تنظیم فاصله متن و کاراکترها است می توانید لینک زیر را بررسی داشته باشید:
https://www.w3schools.com/css/css_text_spacing.asp
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
2 × 3
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
میثم
سلام وقت بخیر. من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم. با...
۱۴۰۱/۰۹/۱۲

پـــــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی...
۱۴۰۱/۰۹/۰۸

حسین ناصری
سلام من از نمونه کد برای نمایش قسمتی از سایت دیگه استفاده میکنم مشکلم اینه بعضی از سایت ها برداشت مطلب با این...
۱۴۰۱/۰۸/۳۰

مهدی
سلام خسته نباشید میخواهم تابع ای بنویسم که توان ۲ یک عدد را فراخوانی با ارجاع انجام دهد ؟ میشه بهم بگید...
۱۴۰۱/۰۸/۲۸

اروین
من یک بلاک html رو از یک بخشی از سایت با روش display:none برداشتم. من میخوام این بخشی که برداشتم توی...
۱۴۰۱/۰۸/۲۶

پـــــرتو
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا...
۱۴۰۱/۰۸/۲۳

پرتو
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل...
۱۴۰۱/۰۸/۱۹

شبنم
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست...
۱۴۰۱/۰۸/۱۸

پــــرتو
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن...
۱۴۰۱/۰۸/۱۸

پرتو
باشه فعلا لپتاپم در دسترسم نیست تا آخر هفته میفرستم
۱۴۰۱/۰۸/۰۷

پرتو
سلام خسته نباشید شرمنده مزاحم میشم اوکی ممنونم از جوابتون یه چیز میتونم بگم میخاستم بگم که برای منوی سمت راست اگر یه بردر برای...
۱۴۰۱/۰۸/۰۵

عباس
سلام خوبید جدید یک هفته ای هست تعداد آنلاین ها را فقط عدد یک نشون میده بی زحمت یه بررسی کنید البته سی‌دی‌ان سایت تغییر...
۱۴۰۱/۰۸/۰۱

پرتو
سلام جناب خسته نباشید عه بازم منظورمو متوجه نشدین اینایی که گفتینو میدونم منظورم اینک کدهایی که توی سایت شما هست همون ادرسی که بهم...
۱۴۰۱/۰۷/۲۹

پرتو
اوکی ممنونم از توضیحاتتون فقط در مورد کد یه چیز بگم من منظورم اینک کجا کدها رو قرار بدم منظورم کدوم قسمت یا اینک کدوم...
۱۴۰۱/۰۷/۲۶

sara24
سلام خسته نباشید کدی رو تو جاوا اسکریپت با if else نوشتم که وقتی روی دکمه (like) کلیک شه اون صفحه رو به لیست...
۱۴۰۱/۰۷/۲۳

پرتو
سلام جناب خسته نباشید جناب الان اون لینکی که فرستادین خوندم فقط نفهمیدم باید چیکار کنم دقیقا یعنی متوجه شدم ولی متوجه نشدم باید دقیقا...
۱۴۰۱/۰۷/۲۲

Zeinab
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin...
۱۴۰۱/۰۷/۲۱

آیدا
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
۱۴۰۱/۰۷/۱۹

سپهر
سلام خسته نباشید من یک وبلاگ داخل بلاگ بیان دارم ،‌ فاو ایکون هم ساختم ولی نمیدونم چه جوری اپلودش کنم هاست هم ندارم خیلی...
۱۴۰۱/۰۷/۱۵

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم ببخشید اینستاگرام قطعه کلا؟ می دونم قطعه و باید با فیلترشکن رفت منظورم اینک من با فیلترشکن هم نمی...
۱۴۰۱/۰۷/۱۵
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.