آموزش ویرایش فونت قالب وردپرس

به درخواست دوستان این آموزش رو آماده کردم در این بخش آموزش ویرایش فونت قالب وردپرس رو می خوام بگم بخش های مربوط به فونت متن , سایز متن و بسیاری ویژگی های دیگه , با فونت دلخواه .

آموزش ویرایش فونت قالب وردپرس

برای ویرایش استایل قالب مثل فونت یا هر استایل دیگه ای بهتره افزونه Firebag مرورگر فایرفاکس برای ویرایش استایل رو نصب کنید. بخش هایی که نیاز به ویرایش داره فایل های استایل قالب هستش مثل  ( style.css , rtl.css ) قایل rtl اگر قالب شما یک قالب خارجی باشه در زمان فارسی سازی قالب ممکن فارسی ساز براش فایل rtl.css ایجاد کرده باشه و اینکه ممکن داخل پوشه ی قالب شما فایل های استایل دیگه ای هم موجود باشه حالا با هر نامی یا پوشه ای به نام css دانل پوشه ی قالب شما وجود داشته باشه و چندین فایل استایل داخل این پوشه باشه.

اگه وارد پست افزونه فایرباگ بشید نحوه ی استفاده توضیح داده شده و در اینجا دیگه توضیح نمیدم .

برخی خاصیت های فونت در css

برخی خاصیت هایی که یه متن می تونه در css به خودش بگیره به صورت زیر هستش

font-family: Byekan , tahoma , arial;
font-size: 13px;
color: #333333;
letter-spacing: 2px;
text-align: right;
direction: rtl;
text-decoration: none;
text-transform: lowercase;
text-indent: 30px;
text-shadow: #FF6600 8px;
font-style: italic;
font-weight: 300px;

خاصیت font-family : برای مشخص کردن فونت متن هستش که در اینجا برای فونت مثلا Byekan در نظر گرفته شده که دو تا فونت هم پشت سرش یا کاما از اولی جدا شدن برای این هستش که اگر فونت اول رو پیدا نکردی دومی را برای متن در نظر بگیر و سومی.

خاصیت font-size : این خاصیت سایز فونت را مشخص می کنه.

خاصیت color : این خاصیت رنگ فونت را مشخص می کنه.

خاصیت letter-spacing : ای خاصیت فاصله ی کاراکترها را مشخص میکنه از سمت چپ.

خاصیت text-align : این خاصیت متن را ترازبندی میکنه ( راست , چپ , وسط )

خاصیت direction : این خاصیت هم مثل text-align تراز بندی رو مشخص می کنه که بیشتر در سایت های فارسی زبان استفاده میشه.

خاصیت text-decoration : اگر توجه کرده باشید لینک ها دارای یک خط در زیرشون هستن با قرار دادن خاصیت text-decoration در حالت none این خط حذف میشه.

خاصیت text-transform : برای بزرگ و کوچک کردن حروف انگلیسی.

خاصیت text-indent : تو رفتگی متن را مشخص می کنه.

خاصیت text-shadow : متن را اگر استفاده بشه سایه دار می کنه.

خاصیت font-style : استایل نمایش فونت مثلا italic کمی متن رو کج می کنه.

خاصیت font-weight : عرض کاراکتر رو مشخص می کنه.

برای این خاصیت ها که در بالا نام برده شد یک خاصیت هم براشون در نظر گرفته شده که دارای خاصیت های دیگه ای هم هستن.

افزودن فونت دلخواه به قالب یا صفحه ی وب

برای استفاده از فونت دلخواه در صفحه ی وب باید ابتدا فونت رو به فایل css معرفی کنید تا فونت های شما رو شناسایی کنه در اینجا برای مثال فونت Byekan را نظر می گیریم برای افزودن فونت بی یکان به متن های سایت باید این فونت ها را در دسترس داشته باشید این فونت ها با سه فرمت به صفحه ی وب معرفی میشن برای Byekan به صورت زیر باید سه فایل داشته باشیم

BYekan.eot
BYekan.ttf
BYekan.woff

باید شما این سه تا فرمت از فونت Byekan را در اختیار داشته باشید برای پیدا کردن فونت ها می تونید تو گوگل جست و جو کنید.

حال به فرض مثال ما این سه فایل را داخل پوشه ی font قرار میدیم , باید این پوشه را به پوشه ی قالب خودمون منتقل کنیم و فایل style.css را باز کنیم و آدرس این فونت ها را به فایل استایل بدیم تا فونت ها را شناسایی کنه.

معرفی فونت دلخواه به فایل استایل

فایل style.css را باز کنید و کد زیر را بعد از اطلاعات قالب کپی کنید ( اطلاعات قالب در ابتدای فایل style.css نام قالب , طراح و … قرار داره بعد از این کدها قرار بدید ) , توجه داشته باشید گفته شد فونت Byekan با سه فرمت داخل پوشه ی font برای معرفی به این صورت عمل می کنیم

@font-face {
font-family: 'BYekan';
src: url('font/BYekan.eot?#') format('eot'),  /* IE6?8 */
url('font/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('font/BYekan.ttf') format('truetype');  /* Saf3?5, Chrome4+, FF3.5, Opera 10+ */
}

اگر فونت های شما بیشتر از یکی بود باید برای معرفی زیر کد بالا قرار بدید کدش رو.

حالا کافیه بخش هایی که می خواهید فونتش رو تغییر بدید با افزونه فایرباگ پیدا کنید و فونتش رو تغییر بدید.

امیدوارم مفید واقع بشه بشه براتون , سعی کردم خیلی ساده بگم که زیاد گنگ نباشه. کار بسیار آسونیه.

مشکل , سوال داشتید در قسمت دیدگاهها مطرح کنید.