parsgreen.com
article

کار با تگ فونت (font) و استایل در html

html-font-tag

در مطالب قبلی از بخش آموزش مقدماتی 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>
پیش نمایش
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» ایجاد جدول با تگ table در html
» آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
» لایه بندی در html با تگ div و span
» آشنایی با HTML، زبان پایه برنامه نویسی وب
» کار با تگ فرم (form) در HTML
commentنظرات (۱۴ یادداشت برای این مطلب ارسال شده است)
نویسنده: هادی
زمان: ۱۴:۱۸:۴۳ - تاریخ: ۱۳۹۱/۱۰/۱۴
خییییییییییلی متشکرم
نویسنده: میلاد
زمان: ۰۲:۲۳:۲۲ - تاریخ: ۱۳۹۲/۰۴/۲۰
دوســـــــــــــتون دارم یه عالمـــــــــه...
نویسنده: Alireza
زمان: ۰۶:۱۲:۰۵ - تاریخ: ۱۳۹۲/۰۶/۱۷
خیلی ممنون
میخواستم سوال کنم چطوری میشه به متن هایی که داخل کدهای جاوا اسکریپت هستند استایل داد مثل متن هایی که با جاوا افکت دار شدن
من کلاس میدم اما کار نمیکنه ممنون میشم راهنماییم کنید
با تشکر از سایت خوبتون
پاسخ: 
بستگی به متدها و روش استفاده از متن در کدها دارد، به طور مثال اگر متن به صورت مستقیم و به فرض با 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...