تبلیغات
قالب حرفه ای وبلاگ، مقاله و آموزش وب
درباره قالب حرفه ای وبلاگ

اینجا وبلاگی برای کسانیه که میخوان قالب حرفه ای در حد یک سایت برای وبلاگ خودشون داشته باشن تو این وبلاگ تمام قالب ها ، لوگوها و ... به صورت اختصاصی توسط خودم طراحی و کدنویسی میشن و در اختیار شما قرار میگیرن پس لطفا تا زمانی که مجبور نشدین لینک مارو از قالبتون حذف نکنین. هر تغییری خواستین تو قالب های طراحی شده بدین میتونین کامنت بذارین تا براتون انجام بدم

آموزش تغییر فونت وبلاگ

بازدید:
یکشنبه 1 شهریور 1394 09:36 ب.ظ

آموزش نصب فونت در قالب
فونت یکی از مهمترین تاثیرات رو روی بازدیدکننده هر وبی داره. بدون اینکه اکثر طراحا توجه خاصی بهش کنن به سادگی از کنارش عبور میکنن و بیشتر به قالب سایت یا وبلاگشون اهمیت میدن تا فونت بدون درنظر گرفتن این نکته که بیشتر حجم صفحه رو نوشته ها تشکیل میدن و این یعنی اهمیت انتخاب فونت مناسب.
مشکل اینجاست که برای نمایش فونت انتخاب شده بر روی مرورگر کاربر باید اون فونت روی سیستم کاربر نصب باشه و این یعنی محدودیت در انتخاب فونت. در نتیجه اکثرا به فونت های رایجی که روی ویندوزها و اکثر دستگاه ها نصب هست روی میارن مثل Tahoma ، Arial و چند فونت دیگر. حالا اگر طراحی قصد داشته باشه مثلا فونت ایران نستعلیق رو در وبش استفاده کنه ممکنه همه کاربرا این فونت رو روی سیستمشون نداشته باشن و سایت با فونت دیگری به نمایش دربیاد که ظاهر سایت رو بهم میریزه.
در این مقاله نحوه ی استفاده فونت مورد علاقه خودتون رو در وبسایت یا وبلاگتون یاد میگیرید.
در این روش شما باید فونت مورد نظر خودتون رو در هاستی که به فایل فونت ها لینک مستقیم میدهد آپلود کنید. بعد در CSS اونهارو فراخوانی کنید و از اونها در قالبتون استفاده کنید.
متاسفانه تعداد بسیار کمی آپلودسنتر رایگان از فونت ها لینک مستقیم میدن اما جای نگرانی نیست سایت های زیادی چه ایرانی و خارجی اینکارو از قبل برای ما انجام دادن و فونت های بسیاری رو در هاست خودشون آپلود کردن و لینک هاشو در اختیار ما گذاشتن که چندتا از اونها رو در ادامه معرفی خواهم کرد.
یکی از سایت های فونت آنلاین فارسی آوب فونت awebfont.ir که میتونید از فونت های فارسی بسیاری که داره استفاده کنید.
سایت دیگری که فونت های کمتر ولی معروفی رو در خودش جا داده فونت آنلاین fontonline.ir که میتونید براحتی از دایرکتوری فونت های اون استفاده کنید.
برای استفاده از فونت های انگلیسی هم که خود گوگل بهترین گزینس میتونید به سرویس گوگل فونت Google Fonts مراجعه نمایید.
استفاده از روش @fontface برای بکارگیری فونت های آپلود شده:
اگر فونت خاصی رو برای استفاده مد نظر دارید و در سایت های معرفی شده یافت نکردید مثلا خودتون فونتی ساختید و میخواهید از اون در قالبتون استفاده کنید ناچار به استفاده از این روش هستید.
1. بهتره فونتتون رو به ترتیب اولویت با سه فرمت ttf و eot و woff در هاستی که از فونت لینک مستقیم میده آپلود کنید. اگر فرمت woff هم آپلود نکردید مشکلی بوجود نخواهد آمد.
2. تکه کد زیر رو در ابتدای فایل CSS قرار بدید اگر از CSS داخلی استفاده میکنید درست بعد از تگ <style> در کد های HTML قرار بدید:
   
@font-face {
font-family: fontname;
src: url("fontname.ttf"),
       url("fontname.eot"),
       url("fontname.woff"),
}

که به جای فونت های قرار داده شده در کد زیر آدرس فونت آپلود شدتون رو قرار میدید.
3. برای استفاده از فونت هم اسمی که جلوی font family نوشتید رو در CSS نوشتید استفاده کنید. (در اینجا fontname)
مثلا

body{
font-family: fontname;
}

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