آموزش رایگان HTML – جلسه 7
در جلسات قبل در مورد جدول ها, فرم ها و… در HTML صحبت کردیم. در این جلسه قصد داریم به بحث فونت ها در HTML بپردازیم و اطلاعاتی را در این زمینه در اختیار شما قرار دهیم. البته مبحث فونت ها در CSS بسیار گسترده تر است که به آن نیز اشاره خواهیم کرد لذا با ما تا پایان این جلسه همراه باشید.
اگر جلسات قبل آموزش رایگان HTML را نخوانده اید پیشنهاد می کنیم از لینک هایی که در پایان مقاله قرار دادیم استفاده کنید و به ترتیب با جلسات و آموزش های ما در افق وب پیش بروید.
🚀 مراجعه به جلسه 6 آموزش HTML – فرم ها در HTML 🚀
عناوین این مقاله
تگ فونت
تگ فونت در HTML چیست؟ چگونه می توانیم این تگ را سفارشی کنیم؟ از تگ های فونت بیشتر در HTML استفاده میشود یا CSS؟ امکان استفاده از فونت فارسی هم وجود دارد؟ و بسیاری سوال های دیگر که در این جلسه قصد داریم به آن ها بپردازیم و اطلاعات کاملی را در این زمینه در اختیار شما قرار دهید.
تگ فونت در HTML این امکان را برای ما فراهم میکند تا اندازه, رنگ, نوع فونت و سایر عواملی که مرتبط با متن است را تغییر دهیم. پس تگ پر کاربردی است که نمی توان به راحتی از کنار آن گذشت.این تگ را میتوانیم در دسته بندی قالب های متن قرار دهیم.
تگ فونت دارای صفت هایی است از جمله؛
صفت color؛ همانطور که مشخص است از این صفت برای تغییر رنگ متن استفاده میشود. رنگ مورد نظر را به عنوان ورودی به تگ متن می دهیم و حاصل تغییر رنگ متن خواهد بود. مثال زیر را ببینید؛
<p>
<font face=’B yekan, Arial,”Times New Roman“‘ color=’ #01b9c6‘ size=’+5‘ >ofoghweb.com : web design</font>
</p>
صفت بعدی تگ فونت صفت size است.
برای تغییر اندازه ی فونت از این صفت استفاده میشود. برای دادن مقدار به این صفت میتوان از گزینه های زیر استفاده کرد؛
- مقادیر مطلق که مقدارهایی بین 1 تا 7 هستند.
- مقادیر نسبی که بین منفی 7 و مثبت 7 هستند. این مقادیر نسبی نامیده میشوند چون نسبت به اندازه ی فونت مشخص شده در تگ <basefont/> سنجیده میشوند.
صفت آخر, صفت face است. در صورتی که بخواهیم متن مورد نظر را با فونت دلخواه خود نمایش دهیم از این صفت میتوانیم استفاده کنیم. این صفت میتواند لیستی از فونت ها را به عنوان ورودی بپذیرد. دلیل استفاده از چند فونت برای این صفت این است که اگر سیستم مورد نظر فونت اول را نپذیرفت به سراغ فونت های بعدی برود.
فونت ها در HTML5
از زمان معرفی HTML5 عملا سفارشی سازی فونت ها به CSS منتقل شد. در ادامه قصد داریم از سفارشی سازی فونت ها در CSS بپردازیم.
در CSS ویژگی های مختلفی برای فونت ها وجود دارد از جمله؛
ویژگی Font-face
از این ویژگی یا صفت برای قرار دادن یک فونت اختصاصی استفاده میشود.به مثال زیر دقت کنید؛
@font-face{
font-family: “Vazir“;
src: url(“/fonts/Vazir-web.woff2“) format(“woff2“),
url(“/fonts/Vazir-web.woff“) format(“woff“);
}
ویژگی Font-Family
با استفاده از این ویژگی میتوانید برای یک بخش مورد نظر فونت عمومی یا اختصاصی تعریف کنید.
تنظیم فونت در کل صفحه
تنظیم خصوصیات فونت برای کل یک صفحه وب کار سختی نیست، فقط باید از عنصر مناسب استفاده کنید: <body>. به عنوان مثال ، فرض کنید می خواهیم کل صفحه از فونت عمومی سیستم sans-serif استفاده کند. می توانیم این کار را با این اعلان CSS انجام دهیم:
body { font-family: sans-serif; }
در هنگام اعمال فونت ها و انتخاب رنگ قلم, دقت به سازگاری رنگ پس زمینه و رنگ انتخابی فونت بسیار مهم است.
به عنوان مثال ، کد زیر رنگ پس زمینه صفحه را به سیاه ، قلم را به سفید و خانواده قلم را به sans-serif تنظیم می کند. رنگ لینک های موجود در صفحه نیز به سفید و رنگ لینک های بازدید شده به سبز تغییر می کند.
body {
color: white;
background-color: black;
font-family: sans-serif;
}
a { color: white; }
a:visited { color: green; }
مبدل های فونت
همانطور که تا به این جا به آن اشاره کردیم فونت ها نقش بسیار مهمی در زیبایی وب سایت ها دارند. قطعا یک فونت مناسب میتواند جلوه ای خاص به وب سایت شما بدهد و استفاده از محتوای ارائه شده را برای کاربران لذت بخش کند.
به همین دلیل بسیاری از طراحان سعی می کنند از فونت های خاص استفاده کنند. اما برخی از این فونت ها برای بازدیدکنندگان نشان داده نمی شوند چون توسط قالب ها پشتیبانی نمیشوند, پس باید به طور مناسبی از آن ها استفاده کرد. برای حل این مشکل باید از مبدل های فونت استفاده شود.
اما این مبدل ها چه هستند و چه کاربردی دارند؟
با استفاده از مبدل ها می توانیم یک فونت را به فرمت های مختلف تبدیل کنیم و با استفاده از قابلیت وب فونت حتی در صورتی که فونت استفاده شده بر روی سیستم شخص بازدید کننده موجود نباشد نیز قابل مشاهده خواهد بود. وب فونت ها، فونت هایی هستند که از طریق دستور font-face@ در CSS می توانید آنها را ازمسیری که قرار دارند فراخوانی کرده و در صفحه استفاده نمایید.
برای حل مشکل پشتیبانی نکردن, لازم است تا فونت ها توسط یک مبدل رایگان آنلاین به فرمت های مختلف تبدیل شوند. فرمت هایی که قالب وب سایت شما از آن پشتیبانی می کند.
از جمله بهترین مبدل های فونت که به صورت رایگان در دسترس هستند و نیاز به ثبت نام و مراحل پیچیده ای برای استفاده ندارند, میتوان به موارد زیر اشاره کرد؛
😊✌ از بقیه‌ی جلسات آموزش رایگان HTML جا نمونید✌😊
2 Comments
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
1 – چرا تو قسمت فونت چندتا نوشتید و , گذاشتید بینشون ؟
2- برای هر قسمت باید اینجوری فونت مشخص کنیم؟
ofoghweb.com : web design
وقتی چند تا اسم فونت مینویسیم یعنی داریم به مرورگر میفهمونیم که اگر فونت اولی لود نشد برو سراغ بعدی و دومی اگر پیدا نشد همینطور بعدی. فونت هایی آخری که تعریف کردیم هم در همه مرورگر ها اجرا میشن