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

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

قضیه ی تگها رو که میدونید ( اگه نه حتما به بخش اولیه آموزش ها سر بزنید! ). بعد از شروع تگ بهتره همیشه نوع فونتمون رو مشخص کنیم. یعنی مثلا: Tahoma ، Arial و ... . برای این کار از خصیصه face استفاده میشه. یعنی اینجوری face="tahoma" . اما ممکنه بعضی از مرورگرها از این فونت پشتیبانی نکنند که با این وجود یا علامت ؟ نمایش میدند یا نوشته های .... . اما برای اینکه از این مشکل ما جلوگیری کنیم میایم چند تا فونت دیگه هم بهش اضافه می کنیم تا اگه مرورگری اولی رو نشناخت به دومی نگاه کنه که میتونه اونو بشناسه یا نه. و همینجور به ترتیب. برای اینکار میایم اینجوری face رو مشخص میکنیم: face="tahoma,arial,"times new roman"". با این کار شما مرورگر رو اجبار میکنید که همه فونت های مشخص شده رو بررسی کنه. دقت کنید که من برای times new roman دابل کوتیشن ( " ) استفاده کردم. این کار برای این بود که مرورگر یکدفعه اشتباه اسم رو جدا جدا بررسی نکنه که باید بگم واجب هم هست.

نوع فونت مشخص شد. حالا میرسیم به اندازه که خیلی مهمه. چرا میگم مهمه به خاطر این که ما در HTML دو نوع اندازه داریم یعنی دو تا خصیصه داریم. یکی size و دیگری font-size . که مشکل ما هم همینه و حالا چرا؟

در HTML و در هر زبان دیگه ای تحت وب ما پسوند هایی برای مشخص کردن اندازه در اختیار داریم که مشترکشون بر اساس pt یا point هست که در اصل اندازه قابل چاپ رو نشون میده و یدی ای که داره اینه فقط به صفحه نمایش کاربر بستگی داره که از نظر آن ? pt چقدره. با توضیحات ما فهمیدیم که در خصیصه size فقط pt قابل تعریفه که به همین جهت حتی میشه پسوند pt رو هم نذاشت!. اما شاید ما دلمون بخواد که اندازه متنمون جوری دیگه باشه. برای اینکار ما میتونیم از پسوندهای دیگه یا واحدهای شمارش دیگه ای هم استفاده کنیم. که عبارت اند از: پیکسل( px )، درصد( % )، اندازه های نسبی ( small, medium, large, x-large )، و Ems (em)  که در خصیصه font-size قرار داده میشند و در زیر شاخه style که دلیلش رو در مثال آبی پایین تر میبینید!.

اندازه ای که الان این مطلب داره بر اساس پیکسله. که میبینید با دیگر اندازه ها فرق میکنه. چون اونها با pt هستند و این اندازه رو قادر نیستند نمایش بدند. این اندازه از ? شروع میشه و تا هر اندازه ای هم یک واحد یه واحد اضافه میشه. یعنی ? یا ? و ... . درصد هم بستگی به اندازه رسمی مرورگر داره. یعنی هر اندازه که مرورگر واسه خودش مشخص کرده با درصد میتونیم بگیم یه درصدی رو نمایش بده. مثلا ??? که میشه نصف. که زیاد به کار نمیره. از اندازه های نسبی هم من تا حالا ندیدم جای زیادی استفاده بشه چون ? تا حالت که میبینید بیشتر نداره. اما پیشنهاد من حالت em است که بیشترین انعطاف پذیری رو نسبت به بقیه داره. یعنی با ?/? اندازه پیش میره و قابلیت تغییر دستی هم توسط کاربر داره. اینو به خاطر این میگم که خیلی ممکنه پیش بیاد که بعضی از افراد به خاطر حس کمتر بینایی نیاز به افزایش اندازه فونت داشته باشند و بخوان دستی و از طریق مرورگر اندازه رو تغییر یدند. حالت em به همراه حالت درصد تنها حالت هایی اند که با تغییر دستی کاربرُ اندازشون تغییر میکنه. یعنی حالت های دیگه در هر حالت یک جور باقی میمونند و نمیشه تغییرشون داد.

خوب اینم از سری اندازه هایی که میشه برای فونت تعبیه کرد که بنابراین دو حالت داریم:

    از اندازه pt استفاده کنیم:  <font face="نوع فونت دلخواه" size="اندازه"></font>

تا اینجا که فکر نکنم مساله ای باقی مونده باشه. حالا میریم به رنگ.

اگه بخوایم قضیه ی رنگ ها رو تخصصی بحث کنیم باید بریم به شاخه گرافیک اما چون مبحث مهمیه من سعی میکنم حالت هایی رو میشه برای مشخص کردن رنگ ها استفاده کرد بگم.

برای مشخص کردن رنگ ها از خصیصه color استفاده می کنیم. خوشبختانه دیگه برای رنگ ها مشکلی مثل اندازه رو نداریم و همین خصیصه کفایت می کنه. اما حالا برای اینکه رنگی رو به HTML معرفی کنیم چند راه داریم که در زیر توضیح میدیم:

یکی اینکه میتونیم فقط اسم رنگ ها رو معرفی کنیم مثلا blue و یا غیره که از این جهت توصیه نمیشه چون محدوده کمی رو محتوا میشه.
دوم اینکه میتونیم از نگارش پیشرفته HTML که بر مبنای ?? است استفاده کنیم که قالبا بیشترین استفاده رو داره به دلیل محدوده وسیع. که به اینصورت; مثلا: #00ff00. این کد به این صورت که 00 نمایانگر بی رنگی و ff نمایانگر رنگ کامله که به ترتیب از چپ به راست مولفه های ? رنگ اصلی قرمز، سبز و آبی هستند. یعنی کد بالایی نشون دهنده رنگ سبز کامل می باشد.
سوم اینکه میتونیم از نگارش پیشرفته گرافیکی rgb استفاده کنیم که همون قرمز ( r )، سبز ( g ) و آبی ( b ) هستند. این نگارش در اصل ایجاد رنگها با استفاده از مبنای ?? رو نشون میده که از 0 ( بی رنگی کامل ) شروع میشه و تا 255 ( وجود رنگ کامل ) ادامه داره. یعنی با مثال میشه این: rgb(0,255,0) یعنی همون رنگ سبز.

با این توصیفات کد رو میشه اینجوری دسته بندی کرد:

    از اندازه pt استفاده کنیم:  <font face="نوع فونت دلخواه" size="اندازه" color="یکی از حالتها"></font>

خوب دیگه تموم شد. با اینکه کاری نداشت اما بحث زیادی رو گرفت. شاید با خودتون بگید اینهمه توضیحات برای چیه. در جوابتون با اجازه باید بگم که درسته که خیلی بحث می کنم در موردشون اما با این کار میخوام بگم که زبان HTML زبانی نیست که بخوایم ساده تصورش کنیم. البته خیلی سخت هم نیست. اما برای اینکه راحت بفهمید پیشنهادی برای شما دارم که واقعا ??? راه پیموده میشه البته به درک شما از مطلب هم ربط داره. اونم اینه که به نظر من شما از سایت ها و وبلاگ هایی که قالب های رایگان ارائه میدند، سورس یا کد HTML اونا رو بگیرید و در نرم افزار های مختلفی از جمله DreamWeaver که ساده ترین و بهترین نرم افزاره به نظر من، پیاده کنید و ببینید که هر تگ یا خصیصه هایی که داره چه تاثیری رو مطلب یا موصوع میده. البته چون بیشتر قالب جوری طراحی شدند که فایل css رو جدا آپلود کردند یه زحمت دیگه هم باید بکشید و اون فایل رو هم دریافت کنید که اگه با دریافتش مشکل داشتید میتونید اعلام کنید تا توضیح بدم. اگه هم در نحوه توضیح دادن روشی داشتید حتما اعلام کنید تا تجدید نظر بشه.

دیگه سرتون رو درد نمیارم. امیدوارم تا آخرش با ما باشید.

موفق باشید/.