پنجشنبه ۲۸ تیر ۱۴۰۳

Thursday, July 18, 2024 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 مطالب بیشتر:
آشنایی با HTML، زبان پایه کدنویسی وب
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
نحوه ایجاد لینک در HTML
کاربرد تگ img و نمایش تصاویر در HTML
کار با تگ های ایجاد کننده لیست در HTML
دیدگاه
more ۱۸ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
هادی
۱۴:۱۸ ۱۳۹۱/۱۰/۱۴
خییییییییییلی متشکرم
میلاد
۰۲:۲۳ ۱۳۹۲/۰۴/۲۰
دوســـــــــــــتون دارم یه عالمـــــــــه...
۰۶:۱۲ ۱۳۹۲/۰۶/۱۷
خیلی ممنون
میخواستم سوال کنم چطوری میشه به متن هایی که داخل کدهای جاوا اسکریپت هستند استایل داد مثل متن هایی که با جاوا افکت دار شدن
من کلاس میدم اما کار نمیکنه ممنون میشم راهنماییم کنید
با تشکر از سایت خوبتون
بستگی به متدها و روش استفاده از متن در کدها دارد، به طور مثال اگر متن به صورت مستقیم و به فرض با innerHTML در یک بلاک div خروجی داده می شود، می توان از تعریف کلاس CSS برای آن بلاک استفاده کرد، یک روش دیگر تغییر استایل عناصر با استفاده از متدهایی مانند document.getElementById است، مثال:
document.getElementById(id).style.fontSize = '12px';
حتی می توانید کلاس عناصر در صفحه را نیز با جاوا اسکریپت تغییر دهید:
document.getElementById(id).className = 'new_class';
قاعدتا باید حداقل در سطح مقدماتی با جاوا اسکریپت آشنا باشید.
Alireza
۲۲:۳۰ ۱۳۹۲/۱۰/۰۹
از سایت وبگو تشکر می کنم و تقاضا دارم PDF هم برای دانلود بزارن
ممنون از نظر لطفتان، متاسفانه در حال حاضر امکان ارائه آموزش ها به صورت PDF وجود ندارد.
مرتضی
۱۵:۰۷ ۱۳۹۳/۰۱/۱۸
خیلی سایت خوبی دارید
خیلی ممنون
hadi
۰۸:۳۷ ۱۳۹۳/۰۲/۲۶
سلام.
مرسی از مطالب خوبتون. من یک قالب آماده گرفتم (php) البته انگلیسی بوده که فارسیش کردم. الان یه مشکل دارم که اسم سربرگ ها رو نادرست مینویسه: به این صورت که حرف اول کلمه رو بزرگ مینویسه و از بقیه حروف جدا میکنه. به عنوان مثال: "برگه" رو "ّب رگه" مینویسه. که "ب" رو هم به صورت Bold مینویسه. (فقط عنوان صفحه ها)
توی فایل css باید دنبال چه کدی باشم که مشکل حل شه؟
به نظر نمیرسد که مشکل از CSS باشد، به خروجی صفحات نگاه کنید، احتمالا حرف اول با یک تگ (مانند strong) از سایر حروف متمایز شده، باید ببینید در کجای کدهای برنامه این کار صورت می گیرد و آن را ویرایش و غیر فعال کند.
mostafa
۰۳:۰۸ ۱۳۹۳/۰۲/۳۱
سلام می خواستم یه پنل برای نوشتن پیام بسازم مثلا کاربر یه قسمت از متن خودش رو با ماوس انتخاب میکنه و میخواد فونتش رو bold کنه چطور میتونم این رو طراحی کنم. با تشکر
چیزی که به دنبال آن هستید WYSIWYG نام دارد که مخفف What You See Is What You Get است، در وب برای داشتن این ادیتور دو انتخاب دارید:
- استفاده از ادیتورهای رایگان موجود مانند TinyMCE، CKEditor و... (برای این مورد در وب جستجو کنید).
- طراحی یک ادیتور شخصی (نیاز به داشتن تجربه بالا و تخصص در حد حرفه ای در کدنویسی جاوا اسکریپت دارد).
انسیه
۱۹:۵۹ ۱۳۹۳/۰۶/۲۴
سلام
خسته نباشید
ببخشید اگه بخوایم UTF8 رو در کدهای HTML برای صفحه مورد نظرمون لحاظ کنیم باید از چه تگی استفاده کنیم؟
ممنون میشم زودتر جواب بدید
منظورتان از لحاظ کردن دقیقا مشخص نیست!
اولین کار در زمینه UTF-8 استفاده از متاتگ در قسمت head صفحه HTML است که در جای خود آموزش داده شده، لطفا در این رابطه در وب جستحو کنید.
reyhaneh
۱۱:۵۵ ۱۳۹۳/۰۸/۲۳
سلام!
می خوام پشت متنم به اندازه ی چند خط رنگی بشه..
ممنون میشم اگه کمکم کنید.
این کار در هنگام ارسال مطلب از طریق ابزار highlighter ویرایشگر ممکن است، در حالت پیشرفته تر باید HTML + CSS بلد باشید تا هم کد رنگ ها را بدانید و هم نحوه اعمال در سورس HTML را.
نرگس
۱۰:۳۵ ۱۳۹۳/۰۹/۰۱
سلام میشه استایل ها رو هم لینک کرد ، با چه کدی؟
سوالتان واضح نیست!
منظور از استایل چیست؟ لینک به استایل برای چه هدفی است؟
اگر سوال در رابطه با CSS است، لطفا به نمونه آموزش های این بخش مراجعه کنید.
saeed
۰۰:۱۳ ۱۳۹۳/۰۹/۰۳
سلام. من از کد ویژگی face که گذاشتین اسفاده میکنم ولی ولیدیتور ارور میگره. تصوری رو ببینید:
http://up.persianscript.ir/uploads/59b8-Capture.jpg
من فقط میخوام تعیین کنم که متن مثلا با فونت یکان نشون داده بشه.
نشون داده میشه ها. فقط توی سایت
http://validator.w3.org
که میخام ببینم قالبم بهینه هست یا نه ارور میگیره!
پیشاپیش ممنون
استفاده از قابلیت font-face در HTML5 مجاز نیست! باید در CSS این امکان را تعریف کنید که در جای خود آموزش داده شده است، لطفا عبارت "آموزش استفاده از فونت فارسی در وب با CSS" را در وب جستجو کنید.
۱۸:۳۴ ۱۳۹۳/۱۰/۰۳
آقا دست شما درد نکنه . واقعا کارم راه افتاد. یه سری به صفحه من بزنید و ببینید که چه شکلی شده.
بازم ممنون
۰۹:۴۶ ۱۳۹۵/۰۲/۲۰
ممنون و متشکر
برای سایز فونت ها چه دستوری باید نوشت؟
متشکر
در HTML از ویژگی size (در آموزش حاضر توضیح داده شده است) برای تگ font استفاده می شود اما بهتر است این موارد را به صورت استایل CSS اعمال کنید.
سعید
۱۸:۴۲ ۱۳۹۵/۰۳/۲۶
سلام
بنده مشکل نمایش اعداد فارسی در وب داشتم که تا حدودی حل شده. با استفاده از فونت اصلاح شده ی yekan ولی یه مشکلی که هستش اینه که بازم اعداد به فارسی نمایش داده نمیشه.
اما تو این وبلاگ به نشانی زیر
http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6
این مشکل حل شده
لطفاً اگر میشه فایل رو دانلود کنید. بعد میبینید که اعدادی که همین جوری وارد شده باز انگلیسی نمایش داده میشه اما آن قسمتی که فارسی نمایش میده دقیقاً فارسی نوشته شده که من نمی توانم آن را خودم بنویسم. مثل shape میمونه انگار.
میخواستم بدونم چه طوریه. البته فکر کنم راه حل خوبی باشه چون به هر حال در کنار نمایش اعداد انگلیسی باید فارسی هم نمایش داده بشه که با این کار این تفاوت به وجود می یاد.
می خواستم بدونم این اعداد چه طور نوشته می شوند. و یا اینکه از کجا میتونم تهیشون کنم. منظورم 0 تا 9 هستش و اینکه آیا میتونم در ادامه از اینها استفاده کنم مثلاً تو بانک اطلاعاتی ذخیره کنم و تو وب نمایش بدم. مشکلی پیش نمیاد؟ منظورم اعداد فارسی بودن
ممنون از سایت خوبتون
همچنان منتظر تغییر سیستم کلی سایتتان هستم. لطفاً زودتر نسخه ی جدید رو تموم کنید.
با تشکر
هرچند دقیق متوجه مشکل نشدیم و فایل سایت مذکور نیز خطای 404 می دهد، اما نمایش اعداد فارسی نیاز به استاندار یونیکد مخصوص به خود دارد، برای ساده شدن کار هم می توانید اعداد را به صورت کپی در هر کجا نیاز بود درج کنید هم در شکل پیشرفته تر یک تابع برای تبدیل اعداد انگلیسی به فارسی داشته باشید، مثال:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<?php
function convertToFa($string) {
$num = range(0, 9);
$persian = array('۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹');
return str_replace($num, $persian, $string);
}
echo convertToFa(35656);
?>
</html>
ايراني
۱۵:۴۶ ۱۳۹۵/۱۱/۲۵
وبگو عاليهههههههههههههههههه!!!
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 3
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سیدعباسی
با تشکر از شما خیلی ممنون مشکلم درست شد فقط یه مشکل دارم چطوری می تونم با php متنی که می نویسم یه قسمت...
۱۴۰۳/۰۴/۲۶

پرتو
سلام ببخشید مزاحم میشم جواب سوال من کو؟
۱۴۰۳/۰۴/۲۵

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

سیدعباسی
با تشکر از شما متوجه شدم با این کد چطوری میتونم عکس یک مطلب رو دربیارم و لینکش رو جدا کنم؟ روی کد...
۱۴۰۳/۰۴/۲۵

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

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

سارا اکبری
لطفا کد کپچا رو درست کنید هر چی کپچا رو میزنیم میگه اشتباهه حتما باید کپچا رو دستی خودمون رو دکمش بزنیم رفرش بشه بعد...
۱۴۰۳/۰۴/۲۱

سارا اکبری
سلام استاد عزیز وقت بخیر بنده ی تعداد افراد انلاین ساده نوشتم ببینید برای پروژه های بزرگ اوکیه و مشکلی پیش نمیاد ؟...
۱۴۰۳/۰۴/۲۱

پرتو
سلام خوبید؟ خسته نباشید ببخشید مزاحم میشم ممنون از جوابتون راستش بعضی وقتا از بس سوالاتم زیاده روم نمیشه ازتون بپرسم مثل امشب که چیکار...
۱۴۰۳/۰۳/۱۳

پرتو
سلام خوبین؟ خسته نباشید یه سوال من منوی سمت راست قالبم نوشته هاش چسبیده به بردر باید چیکار کنم که درست شه؟ یعنی منظورم اینکه...
۱۴۰۳/۰۳/۰۹

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