صابر

چای می‌خورین یا قهوه؟

تغییر فونت وبلاگ به زبان ساده

چهارشنبه, ۲۴ شهریور ۱۳۹۵، ۰۱:۲۲ ب.ظ

هر صفحه وبلاگ شما از دو جزء اصلی تشکیل شده:
۱. HTML که در واقع همان ساختار و محتوای صفحه را تشکیل می‌دهد. مثلا همین وبلاگی که می‌بینید در اصل این شکلی هست:

۲. CSS که کار شکل‌دهی و رنگ‌آمیزی را انجام می‌دهد و نتیجه می‌شود این:

جهت بزرگنمایی تصاویر بر روی آنها کلیک نمایید.


برای تغییر فونت در سرویس دهنده‌های وبلاگی مختلف بدین گونه عمل می‌کنیم:

Blog.ir بلاگ بیان

اگر از blog.ir خدمت می‌گیرید:
۱. در منوی سمت راست مشابه عکس، گزینه "ویرایش CSS قالب فعلی" را انتخاب کنید.
۲. سپس در کادر نوار ابزار بالا کنار find واژه font را به لاتین جستجو نمایید. ممکن است تعداد زیادی از آنها را بیابید.
۳. هر جا font: یا font-family: را دیدید ابتدای اسامی فونت‌ها نام فونت دلخواهتان را به همراه یک کامای لاتین یعنی «,» وارد کنید.

یا اینکه به جای مراحل ۲ و ۳ یعنی جستجو و تغییرات متعدد، صرفا متن زیر را یک بار در ابتدای CSS قرار دهید:

* {
  font-family: Sahel !important;
}

این در واقع دستور می‌دهد که تمامی المان‌های صفحه حتما فونت دلخواه شما باشند که در اغلب مواقع جواب می‌دهد.

پس از ذخیره در صورتی که آن فونت بر روی سیستم کاربر نصب شده باشد در وبلاگ شما به درستی نمایش می‌یابد.


از آنجایی که اغلب فونت های وبی یا جدید بر روی سیستم‌عامل کاربران نصب نمی‌باشد باید این فونت را در جایی روی وب ذخیره و به کمک همان CSS آن را به همراه صفحه بر روی مرورگر مخاطب بارگزاری نماییم. تقریبا همه وب‌سایت‌های دنیا به یکی از این دو صورت عمل می‌کنند:

روش اصلی و طولانی:

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



پس از کپی آدرس، آن را در متن زیر در قسمت url وارد نمایید و سپس کل این متن را به ابتدای CSS در قسمت "ویرایش CSS قالب فعلی" وبلاگتان اضافه کنید:


@font-face {
  font-family: Sahel;
  src: url('http://bayanbox.ir/download/YYY/Sahel.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: Sahel;
  src: url('http://bayanbox.ir/download/YYY/Sahel-Bold.woff') format('woff');
  font-weight: bold;
}

هر چند نسخه کامل‌تر این متن را می‌توانید در آدرس زیر مشاهده نمایید:
https://github.com/rastikerdar/sahel-font


روش ساده و میانبر:

توی این روش پس از مرحله ۳ کافیه که به قسمت "ویرایش ساختار قالب فعلی" مراجعه سپس بعد از <head> این خط را وارد کنید و پس از آن دکمه ذخیره را کلیک کنید:
فونت ساحل:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/sahel-font/v1.0.0-alpha6/dist/font-face.css">

فونت وزیر:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/vazir-font/v4.1.1/dist/font-face.css">

قلم صمیم:

<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/samim-font/v1.0.2/dist/font-face.css">

و ...
البته به جای مثلا v1.0.0-alpha6 بهتر است آخرین ورژن فونت را قرار دهید. به هر صورت موارد بالا بدون مشکل کار می‌کنند.


همین!
برای مشاهده دیگر فونت‌ها به آدرس زیر مراجعه کنید:
http://rastikerdar.blog.ir/tag/%D9%81%D9%88%D9%86%D8%AA

Mihanblog.com میهن‌بلاگ

برای میهن بلاگ نیز از روش مشابه استفاده نمایید.
در منوی سمت راست قالب را انتخاب نموده و سپس در بالا سمت چپ "ویرایش قالب فعلی" را کلیک کنید. تفاوت میهن بلاگ با سرویس بلاگ در اینست که میهن بلاگ فایل HTML و CSS را در یک جا قرار داده است. و شما به جای "ویرایش CSS قالب فعلی" در سرویس بلاگ بیان کافیه که در در قسمت <style> به دنبال واژه فونت بگردید و تغییر دهید.


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

  • صابر راستی کردار

نظرات (۳)

سلام برادر 
خیلی قشنگ توضیح دادید ولی من باز نفهمیدم اصن من از کد و...
هیچی نمیدونم 
خیلی دوست داشتم حضوری بیام خدمتتون برام توضیح میدادید
پاسخ:
باور کن آفا مهدی از این ساده تر بعید می دونم کسی بتونه توضیح بده. پیش فرض من موقع نوشتن این بود که مخاطب هیچی از کد نمی دونه و نباید بدونه :)
من دقیقا مرحله به مرحله شرح دادم که چه باید کرد. نه اینکه چه باید دانست!

اگر در حین مراحل مشکلی داشتید بفرمایید.
برادر من فایل (woff) که در فایل زیپ فونت وزیر بود رو برداشتم
در بیان باکس ذخیره کردم
آدرس لینک رو برادشتم گذاشتم جای url اسم وزیر هم نوشتم
ولی هنوز فونت تغییر نکرده
خواهش می کنم کمکم کنید
پاسخ:
۱. آدرس مستقیم خود فایل رو باید بدین نه صفحهٔ فایل.
۲. اطمینان یابید که نام وزیر در ابتدای فونت‌ها توی CSS به درستی وارد کرده باشید.
۳. یا اینکه از روش ساده و میانبر که توی توضیحات آمده استفاده کنید.
  • ابو اسفنج بلاگفانی
  • سلام علیکم. خیلی خیلی سپاسگزارم. استفاده کردم. ممنون.
    پاسخ:
    سلام
    خواهش می‌کنم

    ارسال نظر

    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    تجدید کد امنیتی

    آدرس ایمیل:
    saber.rastikerdar بر روی جی‌میل گوگل
    آدرس گیت‌هاب:
    github.com/rastikerdar

    آخرین نظرات
    زرگر بغدادی اثر کمال‌الملک