همه ما فونت های زیبای زیادی را همه روزه مشاهده میکنیم که در بسیاری از کار های گرافیکی جلوه زیادی به کار میبخشد
اما چقدر سخته که برای طراحی سایت مجبور باشیم از چند تا فونت ساده و معیار استفاده کنیم که تو تمام سیستم ها سازگاری داشته باشه.
تا حالا برای طراحی سایت یا مجبور بودیم از فونت های معمولی مثل 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>
|
علاقه مندی ها (Bookmarks)