بازی با فونت های قالب سایت

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

من در این مقاله قصد ندارم چیزی رو آموزش بدم فقط میخوام با این که  چطور جاهای مختلف سایت با فونت ها و اندازه های مختلف نشان داده شدند اشنا شوید.

ما از فونت ها,رنگ و … برای متفاوت نشان دادن یه متن استفاده می کنیم.این تنظیمات در فایل style.css ذخیره میشه و برای کاربر نشون داده میشه.اما نکته اینجاست که اگه کاربر سایتمون فونتی رو که ما دوست داریم روی کامپیوترش داشت,سایت رو با فونت دلخواه ما می بینه ولی اگه اینطور نبود به صورت خودکار متن سایت ما با فونت های عمومی css دیده میشه.این که نوشته ما با چه فونتی (چه لیستی از فونت ها) نمایش داده بشه با کلید واژه ای در css به نام font – family  مشخص میشه مثل کد زیر:

#menu {font-family: Verdana, Arial, Helvetica,
   sans-serif; font-size:1em; color:blue; }

در این کد مشخص شده که کاربر متن رو با verdana ببینه اگه کسی این فونت رو نداشت با arial اگه اونم نداشت با …
و اگه هیچ کدوم رو نداشت باsans-serif که فونتی عمومی در css هست متن رو ببینه.بعضی از فونت ها نامی دو قسمتی دارند,نام این فونت ها رو داخل “” قرار می دهیم.

#menu {font-family: Verdana, Arial, Helvetica, 
     "Lucida Console", sans-serif;.....

فونت در وردپرس
برای استفاده از فونت در قالب های ودرپرس راه های زیادی هست.می توانیم از چندتا فونت در چند جای سایت استفاده کنیم و سایتمون رو کلا تغییر بدیم.فونت ها رو باید روی قالب سایت اعمال کنیم.البته چون قراره از فونت ها هر جایی که دلمون خواست استفاده کنیم پس بهتره کدهای فونت رو در قسمت body سایت قرار بدیم.

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }

با استفاده از این کد,متونی از سایت ما که با هیچ تگ یا div خاصی مشخص نشدند از کد بالا برای نمایش استفاده می کنند.
اما بعضی از قسمت های مهم سایت مثل نوشته هامون با تگ های زیر در style.css مشخص شدند(البته این همیشگی نیست ممکنه طراح قالب از تگ های دیگه ای استفاده کرده باشه)
content
post
entry
post-entry
مثل:

.content p { margin:5px;
    padding:5px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif; 
    font-size: 110%;
    color: black; }

پیدا کردن تگ درست برای یه متن خاص به همین آسونی نیست,خیلی از تگ ها میون کدهای تو در تو گم شدند.بهترین را استفاده از قابلیت inspect element در مرورگر های OPERA یا CHROME هست.به این صورت که روی متنی که دوست دارید تغییر بدید کلیک راست کنید و این قابلیت رو اجرا کنید تا کد CSS رو ببنید.
کدام فونت
این که از چه فونت استفاده می کنید یه نظر شخصی هست,اما بهتر ه از فونت هایی استفاده کنید که در بیشتر کامپیوتر ها وجود داره.
بهترین راه برای اینکه همیشه سایت ما با فونتی که علاقه داریم نمایش داده بشه اینه که فونتی که دوست داریم رو با سایتمون آپلود کنیم و با کد زیرکه در style.css قرار میگیره این فونت رو به قالب معرفی کنیم.

@font-face {
	font-family: Museo300;  
	src: local('Museo300-Regular'), 
		url("fonts/Museo300-Regular.ttf") format('truetype');  
	font-weight: normal;  
}

در مثال بالا من برای فونتم اسم Museo300 رو در نظر گرفتم و فونتم رو در پوشه fonts قالبم ریختم
حالا هرجا که بخوام میتونم جلوی قابلیت font-family اسم Museo300 رو تایپ کنم تا متن مورد نظرم با این کد نمایش داده بشه.

.post-item {font-family: Museo300}

تغییر اندازه متن ها
باز در کدهای css جایی برای اینکار هست.قابلیت font-size که با واحد پیکسل مقداردهی میشه

#menu ul li {font-size: 12px; color: green; }

یه روش خیلی خوب دیگه این است که متنی که در body هست رو به عنوان متن مرجع قبول کنیم و  متون دیگه رو نسبت به اون مشخص کنیم (با درصد)

body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }

با فونت ها بازی کنید
راه های خیلی زیادی برای بازی با فونت ها وجود داره مثلا رنگ کلمات مهم رو تغییر بدیم و … با استفاده از راهنمایی های بالا شما می توانید یکم کدهایی رو که داخل فایل style.css هست رو تغییر بدید تا ظاهر سایتتون کمی عوض بشه اما از من میشنوید اگه زیاد به کارتون مطمئن نیستید به این کدها دست نزنید.