amin.poorsaeed

( ویژه ) آموزش استفاده از cufon در وبسایت های فارسی جوملایی

آغاز شده توسط: amin.poorsaeed,

17 پست در این موضوع

ارسال شده در

مقدمه :

شاید شما مشکلی شبیه به مشکل بنده داشته باشین که بخواین فونتی رو که تو سیستم کاربر نیست رو تو سایتتون استفاده کنید و فونت به صورت کامل در کامپیوتر کاربر اجرا بشه .

برای اینکار دو روش وجود دارد :

1. استفاده از @font-face

2. استفاده از cufon

همونطور که می دونید @font-face بر پایه css3 هست و تنها مرورگر های مدرن از اون به صورت کامل بهره می برن و این گزینه تو مرورگر های قدیمی اجرا نمی شود . به همین دلیل من دنبال روش بهتری بودم که چندی پیش به این روش پی بردم .

البته استفاده از این روش رو هم باید مدیون تیم اورتا بدونیم زیرا cufon در ابتدا از زبان فارسی پشتیبانی نمی کرد و این تیم با قدرت تمام ابزاری برای cufon طراحی کرده اند که به وسیله آن می توان هر فونت فارسی رو که دوست داریم رو تبدیل به فونتی با فرمت js کنیم و به راحتی از آن در سایتمان اسفتاده کنید .

در حالی که در روش @font-face تنها از بعضی از فونتا می تونستیم استفاده کنیم و بیشتر افراد حتی خود من از فونت های تیم wedesign در این روش استفاده می کردم ولی دیگه با روش cufon می تونیم هر فونتی که دوست داریم رو تو سایتمون استفاده کنیم .

شروع به کار :

برای شروع به کار ابتدا این فایل را دریافت کنید .

این فایل حاوی نرم افزار bifon می باشد که بر پایه Adobe air برنامه نویسی شده به همین دلیل برای اجرای اون حتما لازم هست که این نرم افزار بر روی کامپیوتر شما نصب باشه ، در صورتی که این نرم افزار رو ندارین بر روی این لینک کلیک کنید تا نرم افزار مورد نظر را دریافت کنید .

بجز نرم افزار bifon در این بسته مثال ها و cufon نیز موجود می باشد ، در واقع این بسته یک بسته کامل می باشد که شما برای استفاده از این روش به آن نیاز دارید . برای نصب نرم افزار bifon فایل Bifon Font Generator.air رو اجرا کنید تا نرم افزار نصب شود .

بعد از اجرای نرم افزار بالا که در پکیج موجود می باشد با این صفحه روبرو خواهید شد .

joomlaforum.ir_13384485402.png

که باید بر روی Install کلیک کنید تا پنجره زیر باز شود .

joomlaforum.ir_13384485403.png

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

حالا به قسمت اصلی توضیحات و معرفی نرم افزار می رسیم .

این نرم افزار کار تبدیل فونت مورد نظرمون به فونتی با فرمت js رو انجام می ده ، تنها فونتی که این نرم افزار از اون پشتیبانی نمی کنه فونت dast nevis هست که به دلیل ساختار متفاوت اون فونت هستش .

joomlaforum.ir_13384485391.png

1. Persian Font : در این قسمت شما با کلیک کردن بر روی دکمه Browse می توانید فونت فارسی مورد نظرتان را که با فرمت ttf می باشد را انتخاب کنید .

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

3.English Font : از ویژگی های عالی این نرم افزار می توان به این اشاره کرد که شما می توانید برای حرفو انگلیسی نیز فونت مخصوصی انتخاب کنید . در این قسمت بر روی Browse کلیک کنید و فونت انگلیسی مورد نظرتون رو انتخاب کنید .

4. Persian Font Family : در این قسمت اسم فونت فارسی رو که در قسمت 1 به نرم افزار تعریف کردین رو انتخاب کنید .

5.در این قسمت تنظیمات اضافه مربوط به فونت رو شما می تونید تعریف کنید برای مثال فونت های برای حروف فارسی باشن یا برای حرفو انگلیسی یا هر دوشون ، از فونت فارسی برای اعداد ، کاراکتر های اضافه استفاده بشه یا از فونت انگلیسی ؟

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

7.با انتخاب font-family در قسمت 4 این قسمت نیز به صورت خودکار پر می شود برای مثال اگر شما فونت B Koodak رو انتخاب کنید در این قسمت عنوان B Koodak نوشته خواهد شد ولی اگر شما این font-family را برای فونتتان انتخاب کنید ممکن است فونت از کامپیوتر کاربر اجرا شود پس بهتر است از نامی دگیر مثل Koodak یا my font استفاده کنید .

8.در این قسمت شما می توانید به نرم افزار تعریف کنید که کاری کند فونت تنها در دامین هایی که در این text box وارد می کنید اجرا شود نه دامین های دیگر .

9. در آخر بر روی گزینه Generate کلیک کنید و منتظر بمانید تا فرایند تکمیل شود ، بعد از تکمیل فرآیند این گزینه به Save تبدیل می شود که می توانید با کلیک بر روی Save فونت مورد نظرتون رو ذخیره کنید ، دقت کنید که در هنگام ذخیره فونت اسم فونت رو به صورت myfont.js بنویسید تا با فرمت js ذخیره شود .

قسمت دوم آموزش در پست بعدی تاپیک

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

با سلام

بابت آموزش خیلی خوبت ممنونم امین جان.

خسته نباشی

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

1000 امتیاز مثبت افزوده شد....

منتظر ادامه ی آموزشهای خوبت هستیم:a2d3:

موفق و سربلند و پایدار باشی

یا حق

Share this post

Link to post
Share on other sites

ارسال شده در (ویرایش شده)

حالا رسیدیم به قسمت دوم آموزش و تعریف کردن فونت به قالب سایتون ، برای اینکار باید ابتدا فایل هایی رو که تو پوشه Text Converter/js هست یعنی فایل های bifon-1.1b.min.js و cufon-1.10.min.js رو آپلود کنید به پوشه js قالب پیشفرض سایتتون . سپس در این پوشه فونتی رو که ساختین هم آپلود کنید یعنی myfont.js رو .

بیشتر قالب های جوملایی کد های اصلی بارگذاری فایل های جاوا اسکریپت رو یا توی یک فایل که تو پوشه layout هست می زارن یا تو همون فایل index.php موجود در پوشه قالب ، شما باید ابتدا این فایل رو پیدا کنید ، برای مثال تو قالب هایی که با فریم ورک وارپ ساخته شدن مسئله عوض می شه این قالب ها خودشون کد های خاص خودشون رو برای بار گذاری فایل های js دارن که میشه اونا رو تو فایل template.config.php تعریف کرد ، ما تو این آموزش می خواین قالب rr office رو کاری کنیم که از این خاصیت یعنی cufon بهره ببره ( همون قالب آفیس رپیدراکت )

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

سپس به مسیر layouts موجود در پوشه قالب رفته و فایل template.config.php رو باز کنید .

در قالب های ما فایل های جاوا به صورت $this['asset']->addFile('js', 'js:js.js'); تعریف می شوند ما هم از این روش استفاده می کنیم و این فایل را باز کرده و دنبال این قسمت می گریدم

// add javascripts

سپس کد های زیر را به ترتیب در آخر کد های این بخش اضافه می کنیم 

$this['asset']->addFile('js', 'js:cufon-1.10.min.js');
$this['asset']->addFile('js', 'js:bifon-1.1b.min.js');
$this['asset']->addFile('js', 'js:Koodak.js');

سپس فایل template.php موجود در پوشه layout را باز کنید و دنبال </head> بگردید و بالای ان کد زیر را کپی کنید .

<script type="text/javascript">

		Cufon.replace('h1', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h2', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});			

		Cufon.replace('h3', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h4', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});


	</script>

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

در این کد بالا ما استایل text shadow را نیز به متنمان اضافه کرده ایم این روش قابلیت افزودن gradient را نیز دارد که شما می توانید با استفاده از پوشه examples موجود در این پکیج cufon که دانلود کردید استایل دهی های این سیستم را یاد بگیرید .

اخطار ! در صورتی که قالب شما با افزودن این قابلیت به سمت چپ اسکرول بخورد فایل cufon-1.10.min.js را باز کنید و دنبال cufon cufontext بکردید و مقدار display را به none تغییر دهید تا مشکل شما حل شود .

نکته : اگر به کد زیر توجه کنید شما متوجه می شوید که ما h1 ، h2 و h3 و h4 را تعریف کرده ایم که این قسمت ها به cufon تبدیل بشوند شما می توانید به جای این قسمت از کلاس هایی که برای قسمت های مختلف سایت استفاده کرده اید ، استفاده کنید .

<script type="text/javascript">

		Cufon.replace('h1', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h2', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});			

		Cufon.replace('h3', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h4', {
			textShadow: '#DDD 2px 2px',
			onBeforeReplace:Bifon.convert
		});


	</script>

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

<script type="text/javascript">

		Cufon.replace('h1', {
			color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)' ,
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h5', {
			color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)' ,
			onBeforeReplace:Bifon.convert
		});		

		Cufon.replace('h3', {
			color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)' ,
			onBeforeReplace:Bifon.convert
		});
		Cufon.replace('h4', {
			color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)' ,
			onBeforeReplace:Bifon.convert
		});


	</script>

ویرایش شده در توسط amin.poorsaeed

Share this post

Link to post
Share on other sites

ارسال شده در

سلام اقا من چطور می تونم از این روش در قالب هاب zoo استفاده کنم . می خوام فونت یکان رو هم استفاده کنم ممنون می شم راهنماییم کنید

Share this post

Link to post
Share on other sites

ارسال شده در

با سلام خدمت شما

ببخشید شما قبلا یه آموزش به اسم آموزش استفاده از cufon در وبسایت های فارسی جوملایی گذاشته بودین و من یه سوال در این باره از شما داشتم

من مرحله اول رو کامل انجام دادم و فونت با پسوند JS رو اماده کردم ولی برای مرحله دوم توی پوشه layout قالبی که الان به صورت پیشفرض دارم ازش استفاده میکنم فایل های زیر نیست

template.config.php

template.php

به جاش تو این پوشه فقط یه فایل با اسم index.html وجود داره و توش کد زیر نوشته شده

<html><body bgcolor="#FFFFFF"></body></html>

که رنگ bgcolor رو مشخص کرده دیگه چیزی توش نیست

فریم ورک مورد استفاده این قالبی که دارم استفاده میکنم هم helix هست

و اسم قالب هم shaper_zaara هست

میشه یه راهنمایی کنین که باید چی کار کنم تا بتونم فونت B Nazanin رو تو سایت خودم داشته باشم

Share this post

Link to post
Share on other sites

ارسال شده در

فایل index.html کاربردی نداره و به اون دست نزنید

برای بارگزاری فایلهای js هم به فایلهای قالب خودتون نگاه کنید ببیند در کدوم فایل قالب ، فایلهای js قرار دارند شما هم به همون شکل فایلهای js خودتون رو بارگزاری کنید

Share this post

Link to post
Share on other sites

ارسال شده در

ببخشید من از قالبی استفاده میکنم که با آرتیستر طراحی شده

توی فایل هاش هم پوشه js نداره

توی این قالب های چطوری هستش؟

Share this post

Link to post
Share on other sites

ارسال شده در

مشکل دراستفاده از cufon

سلام

من قالبم امیر کبیره میخوام با استفاه از cufon یه سری فونت جدید به قالبم اضافه کنم اما نمی دونم کجای فایل قالبم باید فایل js که با cufon درست کردم کدومشو و فایل های js درست شده با cufon را قرار بدهم

Share this post

Link to post
Share on other sites

ارسال شده در

مشکل دراستفاده از cufon

سلام

من قالبم امیر کبیره میخوام با استفاه از cufon یه سری فونت جدید به قالبم اضافه کنم اما نمی دونم کجای فایل قالبم باید فایل js که با cufon درست کردم کدومشو و فایل های js درست شده با cufon را قرار بدهم

با سلام و خوش آمد به جوملا فروم

تاپیکهای بالا رو بخونید توضیح داده شده

Share this post

Link to post
Share on other sites

ارسال شده در

سلام اقا من چطور می تونم از این روش در قالب هاب zoo استفاده کنم . می خوام فونت یکان رو هم استفاده کنم ممنون می شم راهنماییم کنید

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

برای اینکه بتونین اضافه کنین به آموزش های یوتم مراجعه کنید http://www.yootheme.com/zoo/documentation

Share this post

Link to post
Share on other sites

ارسال شده در

سلام سال نو مبارک

1-برای فونت یکان با این روش موفق شدم. اما به طور اتوماتیک رفت سراغ عنوان های ماژول ها و اونها فقط عوض شدند. برای اختصاص دادن فونت های دیگر برای منو و فونت بادی یا همان متن اصلی سایت چیکار باید بکنم؟

2- کدهای شما برای فایل کانفیگ قالب هم شامل چند کد "h" یا هدینگ هستش و از شماره h1 تا h6 را شامل نمیشه. چرا؟

3- من کد همراه با گرادیانت را انتخاب کردم. اما اثری از اون افکت ایجاد نشد!

Share this post

Link to post
Share on other sites

ارسال شده در

با سلام و درود

آموزش بسیار خوبی بود

ولی یکی دو تا مشکل دارم

من از این روش در قالب yoo_cloud استفاده کردم ولی فق عنوان ماژول ها تغییر کرد و اون هم به صورت بهم ریخته

مثلا گالری رو نوشته فژقخگ

اینم آدرس سایت:

پنجره عایق ارس

و اینکه منو ها و مطالب عوض نشده

چکار باید انجام داد

با تشکر

Share this post

Link to post
Share on other sites

ارسال شده در

[h=2]غییرات[/h]

با سلام و درود

آموزش بسیار خوبی بود

ولی یکی دو تا مشکل دارم

من از این روش در قالب yoo_cloud استفاده کردم ولی فق عنوان ماژول ها تغییر کرد و اون هم به صورت بهم ریخته

مثلا گالری رو نوشته فژقخگ

اینم آدرس سایت:

و اینکه منو ها و مطالب عوض نشده

چکار باید انجام داد

با تشکر

با سلام

دوست عزیز روش فونت فیس ؛ کاربردی تر و راحتتره تا این روش ...

پیشنهاد میشه فونت فیس ها استفاده کنید.

مطالعه کنید

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

بامدادنیک....

Share this post

Link to post
Share on other sites

ارسال شده در

تا مرحله آپلود فایل myfont.js پیش رفتم

ولی در ادامه اش پوشه layout در قالب من وجود ندارد.

در ضمن تو فایل index.php هم رفتم گزینه add javascripts نداره

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

ممنون

Share this post

Link to post
Share on other sites

ارسال شده در

ممنون از آموزش مفیدتون

متاسفانه وقتی Generate رو می زنم، با این که به اینترنت وصلم، ولی اخطار Cannot connect to the server رو میده.

ممنون میشم راهنمائی کنید

Share this post

Link to post
Share on other sites

ارسال شده در

ببخشید دوباره \ست ارسال می کنم ولی الان داخل یک سیستم دیگه هم که تست کردم این مشکل وجود داشت واخطار cannot connect to the server میداد.

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

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک آموزشهای جوملا 1.7 و 2.5