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

[zigoratsoft 4]

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

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

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

مقدمه:

همه ما فونت های زیبای زیادی را همه روزه مشاهده میکنیم که در بسیاری از کار های گرافیکی جلوه زیادی به کار میبخشد

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

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

مانند مثال زیر:

متن دلخواه شما

موفق و پیروز باشید.

محمد سلطانی (ساعت 04:55 AM)

[zigoratsoft 4]

اگه دقیقاً مشابه همین که گفتم انجام بدید مشکلی ندارید.

من خودم تست کردم

لطفاً توضیح بدید تو کدوم مرحله مشکل داریدفایل رو با استفاده از سایت تبدیل کردید؟؟؟

به زودی یک نمونه کار انجام شده براتون قرار میدم تا انجامش رو ببینید.

[pn1367 0]

اشتباه از من بود

عذر میخوام

درست شد.اینم یه نمونه

http://thesystem.ir/

[zigoratsoft 4]

اشتباه از من بود

عذر میخوام

درست شد.اینم یه نمونه

http://thesystem.ir/

خواهش میکنم دوست عزیز از نمونه کارتون هم ممنونم

سایت قشنگی شده.

موفق و پیروز باشید.

[m2ahdi 0]

دوتان من استفاده میکنم از این روش یه مشکلی که درام اینه که حروف های فارسیم از هم جدا میفته

برای رفعش باید چکار کنم؟

ممنون میشم کمکم کنید

مثلا صفحه اصلی اینجوریه : ص ف ح ه ا ص ل ی

[دفاعی 872]

سلام

مشکل از فونت تونه احتمالا عوضش کنید

[m2ahdi 0]

نه مشکل از فونتم نیست

[مـرادی 155]

سلام

شما از چه مرورگری استفاده میکنید؟

از چه فونتی استفاده میکنید؟

[m2ahdi 0]

از فونت عرشیا و مرورگر فایر فاکس

[مـرادی 155]

دوست عزیز اکه تو نت سرچ میکردید پیدا میکردید روش حل مشکلتون رو

برای حل مشکل شما تاپیکی رو ایجاد کردم

لینک:

http://forum.joomina.ir/thread-6865.html

در پناه حق...

[pn1367 0]

بله گشتم.یک کد برای فایرفاکس میداد که هر کاری کردم عملی نشد برام.

من خواستم کدشو اضافه کنم چون میخواستم برای هیچ کی این مشکل پیش نیاد

[hoomanb 14]

سلام

ببینید اگر بین کدهای شما letter-spacing وجود دارد آن را 0 کنید یا حذف کنید

[pn1367 0]

نه همچین کدی ندارم

[wahid2003vj 0]

این روش رو فقط میشه در قالب های جوملا بکار برد؟

[zigoratsoft 4]

این روش رو فقط میشه در قالب های جوملا بکار برد؟

نه دوست عزيز شما ميتونيد از اين روش براي هر تمپليت و سايتي استفاده كنيد.

[wahid2003vj 0]

این روش رو فقط میشه در قالب های جوملا بکار برد؟

نه دوست عزيز شما ميتونيد از اين روش براي هر تمپليت و سايتي استفاده كنيد.

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

من تمام کارهای گفته شده رو انجام دادم اما فونتی رو که از طریق دستور #load ایجاد میکنیم توی font family نمیاد از خود فونتها هم در فایل سی اس اس شناسای نمیشه.

به نظرتون چه کار دیگه ای باید انجام بدم؟

[zigoratsoft 4]

من خودم كه با اپن كارت كار نكردم شايد دوستان بتونن بهتر راهنماييتون كنند.

ولي فكر ميكنم مشكل شما تو آدرس دهي فايل هاي فونت هست.

ما تو آدرس دهي فونت هامون اينجوري آدرس ميديم

../fonts/byekan.ttf

يعني يك پوشه به عقب برگرد و در پوشه فوت فايل byekan.ttf رو لود كن

بايد دقت داشته باشيد كه مسير هاي شما هم همينگونه باشه و اگه نبود اين قسمت رو مطابق پوشه هاتون تغيير بديد.

بازم دوستان اگه كسي با اپن كارت كار كرده اين دوستمونو راهنمايي كنه.

موفق باشيد.

[wahid2003vj 0]

من خودم كه با اپن كارت كار نكردم شايد دوستان بتونن بهتر راهنماييتون كنند.

ولي فكر ميكنم مشكل شما تو آدرس دهي فايل هاي فونت هست.

ما تو آدرس دهي فونت هامون اينجوري آدرس ميديم

../fonts/byekan.ttf

يعني يك پوشه به عقب برگرد و در پوشه فوت فايل byekan.ttf رو لود كن

بايد دقت داشته باشيد كه مسير هاي شما هم همينگونه باشه و اگه نبود اين قسمت رو مطابق پوشه هاتون تغيير بديد.

بازم دوستان اگه كسي با اپن كارت كار كرده اين دوستمونو راهنمايي كنه.

موفق باشيد.

پوشه های موجود در قالب اپن کارت فرق چندانی با قالب های جوملا نداره و این موردی رو هم که فرمودین چک کردم قبلا اما جواب نداده.

فقط یه موردی وقتی ادرس میدم مسیر ما باید بین " " باشه یا بین ' ' ؛ قالبهای اپن کارت ادرس رو بین ' ' قرار میده.

و مورد دیگه اینکه این ویژگی درکدوم ورژن از سی اس اس اضافه شده؟

---

یه سوال دیگه ، کجای فایل سی اس اس باید کد ها رو وارد کرد؟

[wahid2003vj 0]

[align=justify]خب اشکال کارم رو بعد از ساعتها فهمیدم...

وقتی #load-byekan رو تعریف میکردم ، سعی میکردم تا byekan رو به عنوان font family قسمت body به سی اس اس معرفی کنم و به همین دلیل فونت ها در قالب نمایش داده نمیشدند.

الان کاری که کردم این هست که دوتا فونت به نام های bko1 , bko2 تعریف کردم و همین دو اسم رو در font family قسمت body به سی اس اس معرفی کردم.

حالا این سوال برام پیش اومده که قالب با مروگر اینترنت اکسپلورر مشکل خواهد داشت یا نه بخاطر عدم استفاده از دستور #load-byekan ( البته الان خودم با اکسپلورر 9 مشکلی ندارم و بهترین خروجی قالب رو نسبت به بقیه مروگرهایی که دارم رو تو اون میبینم)[/align]

[yazditabar 2]

ممنون از راهنمایی تون

- یه سوال، اینکار رو انجام دادم حالا برای اینکه از فونتم در ماژول گلوبال نیوز استفاده کنم، در استایل این ماژول، فونت رو چطوری وارد کنم؟

چون همینطوری به جای tahoma فونت bzar رو قرار دادم ولی نمایش داده نشد!

[wahid2003vj 0]

ممنون از راهنمایی تون

- یه سوال، اینکار رو انجام دادم حالا برای اینکه از فونتم در ماژول گلوبال نیوز استفاده کنم، در استایل این ماژول، فونت رو چطوری وارد کنم؟

چون همینطوری به جای tahoma فونت bzar رو قرار دادم ولی نمایش داده نشد!

من با ماژول گلوبال نیوز کار نکردم اما در کلیت کار فرق چندانی ایجاد نمیکنه.

شما باید دقیقا کد های سی اس اسی که مربوط به ماژول مذکور میشند رو پیدا کنید(مثلا اگه میخواید فونت عنوان ماژول رو عوض کنید دقیقا همون کد رو باید پیدا کنید)؛ وقتی پیدا کردین احتمالا اونجا font-family رو tahoma تعریف کردن ، شما باید فونت فامیلی رو تغییر بدین به نام همون فونتی که به قالب تزریق کردین.

[zigoratsoft 4]

سلام دوست عزيز من هم با گلوبال نيوز كار نكردم

ولي يه توضيحي در مورد افزونه ها بهتون ميدم ايشاا... كارتون راه بيوفته

ماژول ها و كلاً افزونه ها معمولاً از CSS مجزا استفاده ميكنند و اين CSS ها معمولاً در پوشه خود افزونه ميباشد.

پس دقت داشته باشيد كه فونت در پوشه خود افزونه قرار داشته باشد و مجدداً در فايل CSS خود افزونه نيز فونت را با آدرس صحيح ايجاد نماييد.

افزونه ها نميتوانند از CSS تعريف شده براي قالب استفاده كنند و بايد در CSS خود آن ها مجددآ فونت را تعريف نماييد و يا به فايل PHP افزونه، CSS قالب را اينكلود نماييد.

موفق و پيروز باشيد.

[sararad 0]

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

میخواستم بدونم که راه حلی وجود داره که با استفاده از اون، کاربر معمولی سایت که با تگ های HTML آشنا نیست هم بتونه از فونت های مختلف استفاده کنه؟

من متن را با فونت ایران نستعلیق در word 2010 تایپ کردم و در word paste سایت paste کردم اما متن را با این فونت نمایش نداد.

کسی راه حلی پیشنهاد داره؟

[yazditabar 2]

یه سوال

فولدر رو ایجاد کردم در درون تمپلیتم

بعد کد زیر رو وارد کدرم در اول css قالب، ولی قالب کلا بهم میریزه و هیچی دیگه سر جاش نیست!

@font-face {

font-family: 'BNazanin’;

src:url('fonts/BNazanin.eot?#’) format(‘eot’),

url('fonts/BNazanin.woff') format('woff'),

url(‘fonts/BNazanin.ttf’) format(‘truetype’);

}

* اوون بحث کد دادن توی فایل Index.php رو متوجه نشدم!

مثلا من میخوام فونت مطالبم بطور کلی فونت نازنین بشه (منظورم فونت متن مطالب هست) چیکار باید بکنم؟

[hadi6612 0]

سلام وقت همگی بخیر

من ازین روش استفاده کردم و فونت b nazanin رو به قالبم اضافه کردم ولی یه مشکل داره:

وقتی ازین روش استفاده بشه کلمات یه کم کشیده و له شده نشون میدن! منظورم اینه که در حالت عادی خودش نشون نمیده...

لطفا راهنماییم کنید که باید چیکار کنم

اینم از تصویرش:

شکل فونت اصلی:

شکل فونت استفاده شده در قالب که کشیده و له شده: