تگ 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 برای استایل دهی متون استفاده کنید.
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
سوال یک) آیا در HTML5 می‌توانیم از تگ Font استفاده کنیم؟ اگر خیر جایگزین آن چیست؟
سوال دو) از ویژگی Font-Face در چه مواردی استفاده میکنیم؟
اگر به هر دو سوال جواب بدی بهتره ولی میتونی یکی رو انتخاب کنی.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم. درصورتی که سوالی داشتید حتما در قسمت نظرات مطرح کنید.
33 پاسخ
یه سوال:
اگر بخوایم چندین فونت اختصاصی تعریف کنیم
می تونیم از یه ویژگی @font-face استفاده کنیم یا باید برای هر کدوم از فونت ها با نام متفاوتی این ویژگی رو به کار ببریم ، مثلا با شماره از هم جداشون کنیم: @font-face1 و @font-face2 و @font-face3 و …
ممنون از وقتی که میذارین برای جواب دادن ♥
جواب سوال 1:
به دلیل عدم پشتیبانی تگ font در html5 نمی توانیم از این تگ استفاده کنیم و جایگزین این تگ استفاده از کدهای css و امکانات مربوطه مثل font-family و font-size و … هست.
جواب سوال2:
از ویژگی font-face برای ایجاد فونت اختصاصی جهت استفاده از آن در سند html استفاده می کنیم.
سلام امیر درسته ممنونم.
سلام خسته نباشید
برای تعیین محدوده صفحه سایت در html مثلا به اندازه یک صفحه مانیتور ۴۰ سانتی متری که بخوایم محتویات رو قرار بدم داخل سایت باید از چه کدی استفاده کرد ؟
سلام باید از width در CSS استفاده کنید
سلام آیا میشه از یک عکس به عنوان رنگ فونت استفاده کرد؟
نمیخوام عکس رو به عنوان پس زمینه فونتم بذارم بلکه میخوام عکس رو به عنوان رنگ فونتم استفاده کنم، چطوری باید این کار رو انجام بدم؟
توی css,html
سلام
نمیشه
بهتره این موارد با فتوشاپ صورت بگیره
خیر !
تگ در HTML5 پشتیبانی نمیشود
باید از css استفاده شود
سلام عماد درست گفتی.
1.خیر نمیتونیم به جاش از css استفاده میکنیم!
2. در مواردی که بخواهیم یک فونت اختصاصی برای صفحه وبمان تعریف کنیم!
سلام فرهان. دقیقا درسته. درود بر تو.
خیر_باید از سند cssاستفاده شود
برای قرار دادن فونت اختصاصی در CSS
سلام علی اکبر دقیقا، باید از استایلدهی سی اس اس استفاده بشه.
پاسخ سوالات :
خیر، از ویژگی فونت در css استفاده می کنیم
از font face برای تغییر فونت متن استفاده می کنیم.
سلام محمد، پاسخ اولت درسته ولی پاسخ دوم جوابش اینه که از Font-face برای معرفی فونت اختصاصی در CSS استفاده میکنیم.
در کل چون پاسخ اولت درسته، هدیه‌ات را در میزفا آکادمی دریافت میکنی و ممنون که انقدر قدرتمند داری آموزش ها رو ادامه میدی.
یک div داریم که توش ی تکستی هست چطور میشه متن تکست با متن بک گراند یکی شود
به متن تکست باید بهش استایل دهی کنی و color بک گراند بهش بدی.
سلام به اهالی میزفا و خصوصا آقای اسماعیلی
خیلی خیلی ممنونم بابت آموزش گام به گام HTML و مهارتی که سخاوتمندانه با ما به اشتراک میزارید.دم شما گرم
همونطور که داخل متن توضیح دادید جواب پرسش اول خیر هست و به عنوان جایگزین از CSS استفاده میشه برای تغییر فونت[امید که به اون مرحله برسم 🙂 ]
و پرسش دو؛ از font face واسه تغییر فونت و اندازه و رنگ متن توی html میشه استفاده کرد.
یه سوالی داشتم ازتون. از اونجایی که تا این پست از دوره،هیچ آموزش مقدماتی از نرم افزارای معرفی شده وجود نداره؛ پیشنهاد شما اینه فعلا با همون نوت پد جلو بریم؟ من متاسفانه حتی توی notepad++ هم بلد نیستم کدمو کامپایل کنم 🙁
سلام زهرا،
خیلی خوشحالم که این آموزش ها برات مفید بوده.
پاسخت درست بود و من به همکاران اطلاع دادم اگر اکانت در میزفا آکادمی داشته باشی، حتما شارژ میشه.
در رابطه با نرم افزار به نظر من سعی کن VS Code یا Brackets را نصب کنی.
کد های HTML نیازی به کامپایل نداره و فقط کافیه پسوند .html یا .htm را به فایل هات بدی و داخل مرورگر بازشون کنی.
امیدوارم توضیحاتم برات مفید باشه. موفق باشی.
بابت راهنمایی کامل و تذکر شما درمورد اصطلاح کامپایل مچکرم!
پس حتما سعی میکنم از این به بعد داخل vc تمرینامو انجام بدم.
خواهش میکنم.
راستی مقاله نرم افزار های مورد نیاز برای HTML هم بروزرسانی شده و شاید بتونه بهت در انتخاب ادیتور مناسب کمک کنه.
ببخشید در اچ تی ام ال چطور میشه فونت کل سایت رو تغیر داد مثلا فونت کل سایت بشه آوینی
سلام مهدی ، این مقاله رو بررسی کن : استایل فونت در css
سلام ببخشید از html راهی نیست چون من نمیدونمccs چیه و باهاش کار نکردم
نه مهدی راحتی نیست و باید با css باشه.
میتونی دو هفته وقت بذاری و یاد بگیری، خیلی سخت نیست و اگر سایت داری css خیلی نیازت میشه.
ما در میزفا هم ۰ تا ۱۰۰ سی اس اس رو رایگان اموزش دادیم.
سلام چجوری میتونم کلمه Google رو هرکدوم از حروفاش یه رنگی بشه ؟؟ من داخل تگ span گذاشتم ولی وقتی padding بش میدم اعمال نمیکنه هچون برای هرحرفش یدونه span گذاشتم.
لطفا راهنمایی کنید
سلام فاطمه.
وقتی padding به تگ های inline مثل تگ span بدی اعمال نمیشه. به عبارت دیگه padding بالا و پایین اعمال نمیشه و چپ و راست اعمال میشه. مگر به کمک css شما یک تگ span رو به حالت inline-block تبدیل کنی.
بله میتونی برای هر حرف یک دونه span بذاری.
سلام
وقت بخير و ممنون از مطلب خوبتان
من فقط با فونت قسمت معرفی کوتاه سايت مشکل دارم
اون رو چطور ميتونم عوض و حتي کمي سايزاش را کوچکتر کنم؟
سلام رها
باید از ویژگی font-size در css استفاده کنید.
سلام. ممنون از شما و وبسایت خوبتون.خواهشا بگید چجوری یا در کجا سایتم رو بسازم و یک لینک براش انتخاب بکنم؟ ممنون میشم اگر پاسخ بدین.با تشکر.
سلام آرمین، دوست من شما میتونی با استفاده از نرم افزار هایی مثل Xampp ، کار خودت رو شروع کنی. با اینحال برای ساخت یک وب سایت نیازمند یک هاست و دامنه هستی که وب سایت های مختلفی این ها رو ارائه میدن و میتونی ازشون استفاده کنی، کافیه تو اینترنت خرید هاست و دامنه رو سرچ کنی. موفق باشی.
سلام وقت بخیر
این کد چند باری تست کردم ولی فونتش عوض نشد میشه کمک کنید
pre{
font-size:20px;
background-color:#00b185;
color:#fff;
padding:10px;
}
الفاتحه
فونتی میخوام داخل کد هست ولی تغییر نمی کنه
سلام وقتتون بخیر.
تگ font دیگر در HTML5 پشتیبانی نمیشود برای استفاده از فونت ها باید از ویژگی های CSS استفاده کنید.
در کد ارسالی شما هم ویژگی font-family وجود ندارد. برای اینکه فونت شما در تگ مورد نظر اعمال شود باید از ویژگی Font-family در CSS استفاده کنید.
اگر در رابطه با CSS اطلاعاتتون کافی نیست. پیشنهاد میکنم مقالات آموزشی میزفا در مورد آموزش CSS را مطالعه کنید.