آموزش برنامه نویسی و مهارتهای وب
شنبه ۱۱ آذر ۱۴۰۲
Saturday, December 2, 2023 GMT +3:30
Saturday, December 2, 2023 GMT +3:30
کاربرد تگ font و ویژگی های فونت در HTML
در مطالب قبل از بخش آموزش مقدماتی HTML با مباحثی از این زبان پایه کدنویسی وب آشنا شدیم، از تگ های اصلی و کلیدی تا فرمت بندی و کار با متن و پاراگراف، در ادامه آموزش ها در این مطلب می خواهیم با کاربرد تگ font و ویژگی های فونت در HTML آشنا شویم، متذکر می شویم که این بخش از سری آموزش های مقدماتی HTML جنبه کاربردی کمتری دارد چرا که امروزه برنامه نویسان وب بیشتر از زبان CSS برای تعریف فونت و ویژگی های آن استفاده می کنند و در کل توصیه شده تا خاصیت هایی که به ظاهر عناصر مربوط می شوند تا حد امکان با استایل CSS تعریف شوند، به هر صورت دانستن مسائل از مقدمات لازمه گام نهادن به مراحل بالاتر است لذا اگر بخواهیم تمام مباحث HTML را پوشش دهیم ناگزیر از طرح مبحث فونت خواهیم بود، برای کاربردی بودن آموزش نگاهی نیز خواهیم داشت به CSS و نحوه تعریف فونت در این زبان استایل نویسی.
نکته مهم: تگ font در HTML نسخه 5 حذف شده و پشتیبانی نمی شود، در صورت استفاده از تگ font در سند HTML 5 خطای زیر را به لحاظ اعتبارسنجی سرویس validator.w3.org دریافت خواهیم کرد:
فونت در HTML ماقبل نسخه 5 به صورت تگ قابل تعریف است، تگی که برای تعریف فونت استفاده می شود با همین نام font و به صورت جفتی است، به طور مثال:
ویژگی face در HTML عملکردی معادل خاصیت font-family در CSS دارد، هردوی این عناصر برای ایجاد و تعریف خانواده ای از فونت ها و نسبت دادن آن به عبارت و متن مورد نظر کاربرد دارند، در مثال زیر نحوه استفاده از این خاصیت در دو حالت HTML و CSS درج شده است، همان طور که گفتیم امروزه استفاده از تگ font در HTML نسخه 5 امکانپذیر نیست و باید از CSS بدین منظور استفاده کنیم:
ویژگی dir برای مشخص کردن جهت نوشتار به کار می رود، برای حروف راست به چپ (به طور مثال زبان فارسی) از مقادیر rtl و برای حروف چپ به راست (به طور مثال زبان انگلیسی) از مقادیر ltr استفاده می شود، این ویژگی در CSS معادل با direction است و به صورت نمونه زیر تنظیم می شود:
برای نسبت دادن رنگ های مختلف به متن درون تگ font در نسخه های ماقبل 5 HTML از ویژگی color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مانند red، blue، green و یا مقادیری به صورت کدهای هگز باشد به طور مثال 666666# یا 3366CC# و...، این ویژگی نیز در CSS با نامی مشابه یعنی color قابل تعریف است:
از این ویژگی در HTML نسخه های ماقبل 5 برای مشخص کردن زبان متنی که در تگ font به کار رفته است استفاده می شود، البته به کار بردن آن جزء در مواردی استثنایی الزامی نیست، مقادیر lang با استاندارد نماد دو حرفی زبان رسمی کشورها تکمیل می شود:
نکته 2: بر اساس توصیه های کنسرسیوم جهانی وب (W3C) در HTML نسخه 5 باید مقدار lang به صورت پارامتر برای تگ html در ابتدای سند تعریف شود، به فرض:
برای تعیین اندازه متن درون تگ font در HTML نسخه های ماقبل 5 از ویژگی size استفاده می کنیم، مقادیر این عنصر به صورت اعداد صحیح معمولا از یک تا هفت (1 2 3 ... 7) و یا به صورت اعداد صحیح به اضافه علامت + از یک تا شش (1+ 2+ 3+ ... 6+) و همچنین به صورت منفی از منفی یک تا منفی 6 (1- 2- 3- ... 6-) قابل تنظیم است، این ویژگی در CSS معادل با خاصیت font-size است و به صورت نمونه زیر تعریف می شود:
اکثر تگ های HTML این قابلیت را دارند که به لحاظ جلوه های ظاهری با استایل CSS تنظیم شوند، تگ font نیز از این قاعده مستثنی نیست و همانطور که پیشتر گفتیم در استانداردهای جدید توصیه شده قابلیت هایی را که هم با خاصیت های CSS و هم با خاصیت های HTML قابل تعریف هستند صرفا با CSS اعمال کنیم، در هر حال جهت آگاهی از چند و چون کار در نمونه زیر اشاره ای داریم به نحوه استفاده از class و id بر روی تگ font در نسخه های ماقبل HTML 5:
برای جمع بندی آموزش کاربرد تگ font و ویژگی های فونت در HTML در نمونه کد زیر به کمک استایل CSS خاصیت هایی را که با هم بررسی کردیم به تگ های HTML نسبت داده ایم که می توانیم پیش نمایش آنلاین آن را تست و بررسی کنیم.
نکته: با توجه به اینکه تگ font در HTML نسخه 5 منسوخ و حذف شده است، لذا در این نمونه کد بر شیوه توصیه شده جدید و استفاده از CSS تاکید داشته ایم.
The font element is obsolete. Use CSS instead.نحوه تعریف تگ font در HTML
فونت در HTML ماقبل نسخه 5 به صورت تگ قابل تعریف است، تگی که برای تعریف فونت استفاده می شود با همین نام font و به صورت جفتی است، به طور مثال:
<font>متن داخل تگ فونت</font>ویژگی 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>ویژگی 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>نکته 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><style>
.text {
font-family: Tahoma, Geneva, sans-serif;
direction: rtl;
color: #666666;
font-size: 12px;
}
</style>
<p class="text">این متن جهت آزمایش نحوه تعریف class و id فونت در CSS است!</p>پیش نمایش ویژگی های فونت در 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
برچسب ها: HTML
مطالب بیشتر:آشنایی با مفهوم Semantic در HTML
آشنایی با HTML، زبان پایه کدنویسی وب
لایه بندی در HTML با تگ div و span
کاربرد تگ img و نمایش تصاویر در HTML
کار با تگ های ایجاد کننده لیست در HTML
دیدگاه
۱۸ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.مهدی
۱۹:۴۶ ۱۳۹۸/۱۰/۲۸
سلام من مهدی هستم. چجوری باید برای سایتی که ساختم آدرس بسازم که وقتی در سرچ گوگل بنویسیم برایمان بیاورد.
برای ساخت سایت باید یک دامنه (آدرس اینترنتی) خریداری و ثبت نمائید، سپس این آدرس را به یک فضای میزبانی وب که معمولا از شرکت های هاستینگ خریداری می شود متصل کرده و برنامه سایت (به فرض وردپرس) را در آن بارگذاری کنید، در نهایت با تبادل لینک در فضای وب یا ثبت سایت در ابزار وبمستر گوگل می توانید سایتتان را به این موتور جستجو معرفی کنید، در مورد وبلاگ فرآیند خرید دامنه و هاست نیازی نیست و کافی است با وبلاگ های مرتبط تبادل لینک داشته باشید یا آدرس وبلاگ را در ابزار وبمستر گوگل ثبت کنید، پس از مدت زمانی (بین 1 تا چند ماه) مطالب شما در گوگل قابل جستجو هستند.
آیدا
۱۷:۴۶ ۱۴۰۱/۰۷/۱۹
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
سوالتان مبهم است، اگر منظور تنظیم فاصله متن و کاراکترها است می توانید لینک زیر را بررسی داشته باشید:
https://www.w3schools.com/css/css_text_spacing.aspمحمدرضا
۱۶:۲۴ ۱۴۰۲/۰۷/۱۱
ممنون به خاطر وب سایت عالی تون
صفحه 2 از 2آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.بهاره هوشمندی
سلام استاد خسته نباشید ببخشید باز مزاحم شدم اگه من بخوام از تگ strip_tags استفاده کنم و استثنا قائل بشم استایل های اون...۱۴۰۲/۰۹/۱۰
معراج
سلام من در قدیم سیستم مدیریت محتوا استفاده میکردن که وقتی متغیر بدون محتوا ایجاد میکردی ارور نمیداد و نیازی هم به @ قبلش...۱۴۰۲/۰۹/۰۸
ابوالفضل
سلام استاد وقتتون بخیر مثل همیشه من با یک مشکل بزرگ مواجه شدم و مجدد مزاحمتون میشم من به یک regex نیاز دارم تا...۱۴۰۲/۰۹/۰۶
بهاره هوشمندی
استاد ببخشید وقتی یه متن طولانی رو باهاش چک می کنم اگه تگ span و b داشته باشه چون تگ رو نمی بنده تا...۱۴۰۲/۰۹/۰۲
بهاره هوشمندی
با سلام استاد بزرگوار از لطف و محبت شما بسیار ممنون و سپاسگزارم خیلی عالی بود اینطوری خیلی خوب شد دستتون درد نکنه...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و از شما من این کد رو امتحان کردم واسه متن عادی خوبه و جواب میده ولی واسه متن طولانی که رنگ...۱۴۰۲/۰۹/۰۱
بهاره هوشمندی
با سلام و خسته نباشید استاد بزرگوار آیا راهی وجود داره تفاوت دو تا متن رو با php پیدا کرد؟ مثلا با...۱۴۰۲/۰۸/۳۰
مهراد
سلام در جدول موقعی که عکس رو با php فراخوانی میکنم نمیاره تصویر عکس. لطفا راهنمایی کنید. ۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با سلام و درود استاد بزرگوار یه مشکل برام پیش اومده توی مطالب ارسالی سایت محتوایی به این صورت به متن ها اضافه شده...۱۴۰۲/۰۸/۱۷
بهاره هوشمندی
با تشکر از شما استاد گرامی پس کد رو باید اینطوری وارد کنم؟ اینطوری واسه من کار می کنه سپاسگزارم از شما...۱۴۰۲/۰۸/۰۹
بهاره هوشمندی
با سلام از لطف و محبت شما بسیار ممنون و سپاسگزارم دست شما درد نکنه لینکهای شما رو بررسی کردم یعنی باید کل کدهایی...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام و تشکر از شما من توی یه صفحه خالی هم امتحان کردم و یه amar.html هم توی پوشه root هاست ساختم بازم...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
با سلام با تشکر از شما من کاری که گفتید رو انجام دادم ولی بازم صفحه لاگین رو که میزنم باز آمارگیر اونو...۱۴۰۲/۰۸/۰۸
بهاره هوشمندی
سلام خسته نباشید من یه کد واسه آمارگیر دارم که جاو هست از سایت وبگذر بعد توی همه صفحه ها فعاله چطوری می تونم...۱۴۰۲/۰۸/۰۷
hossein
سلام وقت شما بخیر کدی هست که بشود با کمک اون، به محض حذف محصول توسط فروشندگان (افزونه دکان)، تصاویر محصول نیز حذف شوند...۱۴۰۲/۰۷/۲۵
hossein
سلام وقت شما بخیر ممنون میشم اگه راهنماییم کنید میخوام کدی در اختیارم بزارید که بتونه برام سقف درصد مدیر را تعیین کنه توی...۱۴۰۲/۰۷/۱۴
در انتظار بررسی: ۱
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.