امروز : شنبه ۳۱ تیر ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

summer-festival-banner

How-Add-Font-Web افزودن فونت دلخواه به قالب وردپرس

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

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

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

پیش نیاز این آموزش

برای درک بهتر این آموزش داشتن کمی دانش css کافی می باشد و در سطح بسیار مبتدی می باشد.

راهنمای افزودن فونت دلخواه به قالب وردپرس

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

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

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

خوب حال باید یک پوشه با نام fonts در پوشه قالب خود ایجاد کنید و فونت وب های زیر را درون این پوشه کپی کنید.

دانلود فونت های وب یکان

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

برای مثال میتونید فایل استایل style.css را ویرایش کنید و فونت را درون تگ body اضافه کنید بصورت زیر:

body{
font:11px/2 yekan,tahoma
}

دقت کنید 11px سایز فونت ، مقدار 2 ارتفاع فونت و yekan,tahoma فونت های فراخوانی می باشد.

حال میتوانید در هر مکانی که میخواهید فونت مورد نظر را فراخوانی کنید.

خصوصیات فونت ها رو بیشتر بشناسید :

  • خاصیت font-family : این گزینه هم نام فونت رو مشخص میکنه (برای مثال font-family:yekan,tahoma;)
  • خاصیت font-size : سایز فونت رو مشخص می کنه. (برای مثال font-size:11px;)
  • خاصیت color : رنگ فونت را مشخص می کنه. (برای مثال color:#000;)
  • خاصیت letter-spacing : فاصله کاراکترها را مشخص میکنه از سمت چپ (برای مثال letter-spacing:2;)
  • خاصیت text-align : متن را ترازبندی میکنه (برای مثال text-align:right;)
  • خاصیت direction : این خاصیت هم مثل text-align تراز بندی رو مشخص می کنه (برای مثال direction:rtl;)
  • خاصیت text-transform : برای بزرگ و کوچک کردن حروف انگلیسی (برای مثال text-transform: capitalize;)
  • خاصیت text-indent : تو رفتگی متن را مشخص می کنه (برای مثال text-indent:5px;)
  • خاصیت text-shadow : متن را اگر استفاده بشه سایه دار می کنه (برای مثال text-shadow: 1px 1px 0px rgb(0, 0, 0);)
  • خاصیت font-style : استایل نمایش فونت مثلا italic کمی متن رو کج می کنه (برای مثال font-style:normal;)
  • خاصیت font-weight : عرض کاراکتر رو مشخص می کنه (برای مثال color:bold;)
  • خاصیت line-height : این خاصیت هم ارتفاع نوشته رو تعیین میکنه (برای مثال line-height:2;)

میتونید در سایت زیر آموزش جامع CSS به زبان ساده را بخونید.

http://www.websiteha.com/page/CSS-Learning

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 383 بار دسته بندی : آموزش ، آموزش css ، آموزش وردپرس دیدگاه : ۰ تاريخ : ۱۴ دی ۱۳۹۵
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
مصطفی قدیمی

مصطفی قدیمی هستم متولد 1373 مدیر و موسس شرکت آوینا وب , علاقه مند به راهکار های نوین تجارت الکترونیک و راه اندازی کسب و کار های اینترنتی

دیدگاه کاربران تعداد دیدگاه : ۰