پارس جوم :: انجمن های تخصصی جوملا

آموزش استفاده از فونت های مختلف در سایت

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

مقدمه:
همه ما فونت های زیبای زیادی را همه روزه مشاهده میکنیم که در بسیاری از کار های گرافیکی جلوه زیادی به کار میبخشد
اما چقدر سخته که برای طراحی سایت مجبور باشیم از چند تا فونت ساده و معیار استفاده کنیم که تو تمام سیستم ها سازگاری داشته باشه.
تا حالا برای طراحی سایت یا مجبور بودیم از فونت های معمولی مثل tahoma استفاده کنیم یا متنمون رو تبدیل به عکس کنیم که تو تمام مرورگر ها و سیستم ها یکسان نمایش داده بشه
حالا با این آموزش می تونید با سرعتی مناسب سایتتون رو به زیباترین شکل نمایش بدید و از هر فونتی که دوست دارید تو قالبتون استفاده کنید.

مراحل انجام کار:
1. تبدیل فرمت فونت به صورت آنلاین
فونت ها با پسوند عادی TTF در تمامی مرورگرها به درستی نمایش داده میشود به غیر از مرورگر اینترنت اکسپلورر.
برای نمایش در این مرورگر باید فونت به فرمت EOT تبدیل شود که از سایت های آنلاینی در این زمینه استفاده میکنیم . (این سایت ها فایل TTF میگیرند و به صورت آنلاین تبدیل میکنند و فایل EOT برای دانلود خروجی میدهند.)
من این سایت رو پیشنهاد میکنم:
http:/www.kirsle.net/wizards/ttf2eot.cgi

2. استایل نویسی در قالب سایت
این کد رو برای آشنایی با نحوه ی کار مطالعه کنید

کد: 

@font-face {

font-family:font-name;

src: url("folder-name/font");

}

خط اول : برای آغار دستور ورود فونت جدید به قالب می باشد
خط دوم : تعیین نام برای فونت می باشد
خط سوم : آدرس فونت رو اطلاع میدهیم

3. به کار گیری در جوملا
گام اول: توی پوشه تمپلیت مورد نظرتون یه پوشه به نام fonts ایجاد کنید و فونت هارو (هم TTF و هم EOT) داخلش کپی کنید
در مثال زیر ما فونت byekan رو در نظر گرفتیم. (هر جا byekan نوشته شده میتونید نام فونت خودتون رو جایگزین کنید.)

گام دوم: کد هارو به شکل زیر توی پوشه css قالبتون، تو فایل template.css کپی کنید.

کد: 

@font-face {

font-family:byekan1; /* تعیین نام برای فونت */

src: url("../fonts/byekan.eot"); /* برای نمایش در اینترنت اکسپلورر */

}

@font-face {

font-family:byekan2; /* تعیین نام برای فونت */

src: url("../fonts/byekan.ttf"); /* برای نمایش در مرورگرهای دیگر */

}

#load-byekan {

font-family:byekan1, byekan2; /* بارگزاری دو فونت در یک عنصر*/

}

گام سوم: فایل template.css رو ذخیره کنید.

گام چهارم: حالا برگردید توی پوشه اصلی قالب فایل index.php رو باز کنید و هر جایی که دوست دارید از این فونت استفاده کنید آی دی ساخته شده در css رو فراخوانی کنید.
مانند مثال زیر:

کد: 

<div id="load-byekan">متن دلخواه شما</div>

این آموزش توسط کاربر zigoratsoft منتشر شده

*قرار دادن فونت جدید و لود شدنش در سایت توصیه نمی شه، چون باعث کندی در بالا اومدن صفحه سایت می شه و ترجیحا برای زبان فارسی همیشه از فونت tahoma استفاده کنید.

صدرا حسابی