تگ font در HTML

تگ Font چیست ؟ چگونه می‌تونیم Font متن را سفارشی سازی کنیم؟ از فونت در html چطور می‌تونیم استفاده کنیم؟ چگونه بدون استفاده از CSS فونت متن را تغییر دهیم؟ نحوه تغییر فونت فارسی در html ، تغییر رنگ متن در html و تغییر رنگ فونت در html چگونه است؟ در این مقاله به آموزش تگ font می‌پردازیم.

این تگ در HTML5 پشتیبانی نمی‌شود، بخش جایگزین تگ Font را مشاهده کنید.

معرفی تگ Font

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

با استفاده از تگ font می‌توانیم رنگ، اندازه و فونت متون و سایر عناصر متنی موجود در در HTML را تغییر دهیم این تگ که در دسته تگ های قالب بندی متن جای می گیرد از صفت ھای زیر پشتیبانی می‌کند.

صفت های تگ Font

صفت face

از این صفت برای تغییر فونت متون در HTML استفاده می‌شود. یعنی در صورتی که بخواهیم متنی را با فونت دلخواه نمایش دهیم از این صفت به همراه تگ <font> استفاده می نماییم . این صفت لیستی از فونت ھا که با “,” (کاما) از هم جدا شده اند را به عنوان ورودی می‌پذیرد و در صورتی که اولین فونت بر روی سیستم کاربر نصب نبود فونت دوم و اگر فونت دوم نصب نبود فونت سوم و … بر روی متن اعمال می‌شود .
برای درک بهتر کاربرد صفت face در طراحی سایت به مثال زیر توجه کنید :

<p> 
    <font face='Tahoma,Arial,Serif'> mizfa.com : Web Design </font>
</p>

صفت size

از صفت size برای تغییر اندازه متون در HTML استفاده می‌شود و به دو صورت زیر می توان این صفت را مقدارهی نمود:

• مقدار مطلق : مقادیری بین 1 تا 7 .
• مقدار نسبی : مقادیری بین 7- تا 7+ که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شده در تگ </basefont> سنجیده خوھد شد. (این تگ را در جلسات آینده معرفی خواھیم کرد.)

صفت color

از این صفت برای تغییر رنگ یک متن استفاده می‌شود. این صفت مقداری از انواع رنگ ھا را به عنوان ورودی می‌پذیرد و رنگ متن را مشخص می‌نماید .
برای درک بهتر صفت به مثال زیر توجه نمایید :

<p> 
   <font face='Tahoma, Arial,"Times New Roman"' size='+2' color='#ff0000'> mizfa.com : Web Design</font> 
</p>

سی اس اس ( CSS ) جایگزینی برای تگ Font در HTML5

از زمان معرفی HTML5 دیگر سفارشی سازی فونت ها با استفاده از CSS انجام می‌شود. در آموزش CSS به صورت کامل در مقاله آشنایی با Font ها نوید معدن نژاد عزیز توضیحاتی را گفته است که با استفاده از آن می‌توانید فونت‌های مختلف را برای بخش های مختلفتان مشخص کنید. با این حساب، چون این صفحه رو باز کردید، نمیخوام بدون خروجی مثبت از صفحه خارج بشید پس در ادامه به صورت مختصر با نحوه سفارشی سازی فونت ها با استفاده از CSS می‌پردازیم.

ویژگی Font-face برای معرفی فونت اختصاصی

برای قرار دادن فونت اختصاصی در CSS از ویژگی font-face استفاده می‌کنیم. در مثال زیر فونت Vazir که از سری فونت های آزاد و متن باز ایرانی است را معرفی میکنیم.

@font-face {
font-family: "Vazir";
src: url("/fonts/Vazir-web.woff2") format("woff2"),
url("/fonts/Vazir-web.woff") format("woff");
}

توضیح مثال :

خط اول ) در خط اول ما ویژگی Font-Face را با استفاده از یک ات ساین (@) مشخص کردیم. (به این صورت : @font-face )

خط دوم ) با استفاده از Font-Family نام مورد نظرمان را برای فونت مشخص می‌کنیم. اگر اسم فونت دارای فاصله است، می‌توانید از کوتیشن استفاده کنید.

خط سوم و چهارم ) در خط سوم ابتدا با استفاده از Src به سی اس اس می‌فهمانیم که می‌خواهیم مسیر فونت ‌ها را مشخص کنیم و سپس با استفاده از url() محل قرار گیری را مشخص می‌کنیم و در نهایت با استفاده از format() فرمت هر فونت را مشخص می‌کنیم. برای قرار دادن چندین فرمت از comma « , » استفاده می‌کنیم.

اگر مثال های موجود در آموزش اچ تی ام ال را متوجه نشدید، در بخش نظرات به ما اطلاع بدید تا بیشتر راهنماییتون کنیم.

ویژگی Font-Family

با استفاده از این ویژگی می‌توانید از بین فونت های عمومی و همچنین فونت‌هایی که خودتان معرفی کردید، یکی را برای بخشی انتخاب کنید. به عنوان نمونه در مثال زیر با استفاده از font-family ، تمامی تگ های p درون صفحه را به فونت Vazir که در مثال گذشته معرفیش کردیم، تغییر داده ایم.

p{
font-family: "Vazir";
}

همانطور که مشاهده می‌کنید، در خط اول تگ p را معرفی کردیم و سپس در خط دوم با استفاده از ویژگی font-family فونت جدید را مشخص کردیم.

تغییر رنگ در html

خب شاید براتون سوال پیش بیاد که کد تغییر رنگ متن در html چیه؟ یا مثلا تگی به عنوان تگ رنگ در html داریم؟ قبل از تکمیل این مقاله بهتر هست که با نحوه تغییر رنگ متون در HTML هم آشنا بشیم.

p{
color:red;
}

در مثال بالا به جای تگ p می‌توانید هر تگ یا کلاس دیگری را قرار دهید و به جای رنگ وارد شده می‌توانید رنگ های دیگر و کد های رنگی مختلفی را استفاده کنید که در بخش رنگ ها در آموزش CSS با آنها آشنا می‌شویم. پس کد html رنگ متن را هم مورد بررسی قرار دادیم.

نکات تکمیلی تگ font

• اگر می‌خواھید از فونتی استفاده کنید که نام آن دارای فاصله (space) نیز ھست باید نام فونت را در داخل دابل کوتیشن (” “) قرار دھید مانند مثال زیر :

   <font face='Tahoma', "Times New Roman">

• تگ <font> در HTML5 پشتیبانی نمی شود و توصیه می‌شود به جای استفاده از این تگ از CSS برای استایل دهی متون استفاده کنید.

پایانترم

نتیجه گیری

خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات مطرح کنید.