PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش ساده و روان افزودن فونت های فارسی به یک صفحه وب(مشخصا ویبولتین)



AliBother
2012/04/05, 01:42 AM
درود

پیرو این تاپیک: آموزش پیوست فونت در CSS 3 + فونت های اصلاح شده فایرفاکس جدید - صفحه 2 (http://www.vbiran.ir/thread17006-2.html)


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

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

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

1. تبدیل فونت:

ابتدا باید فونت فارسی مورد نظر را به سه فرمت تبدیل کنیم. برای تبدیل فونت میتوانید از این سایت استفاده کنید. : CodeAndMore @font-face made simple tool (http://fontface.codeandmore.com/)

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

2. استفاده از فونتهای تبدیل شده :

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


eot و
woff و
ttf

ابتدا این فونتها را در مکانی در هاستتان آپلود کنید.مثلا روت فروم یا در پوشه ای با نام font در روت فروم.

سپس به additionall.css قالب مورد نظرتان بروید.در ابتدای آن این کد را اضافه کنید.:


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




از این کد میتوانید به تعداد دلخواه استفاده کنید.برای هر فونت یک بار. مثلا اگر قصد افزودن 3 فونت را دارید سه بار از این کد به صورت پشت سر هم استفاده کنید.برای هر کد هم آدرس فونت مورد نظر رو وارد کنید.دقت داشته باشید که مهم نامیست که شما روی فونت میگزارید در این خط:
font-family: 'far_aman-webfont';


در کد بالا فونتهای مورد نظر ما در روت فروم و در پوشه font قرار دارند با نام far_aman-webfont

پس از افزودن فونت حالا مثلا میتواند فونت قسمت forumhead رو به فونتی که به صفحه وبتان افزوده اید تغییر دهید.

نمونه:

http://cdn.vbiran.ir/images/imported/2012/04/m3rkopy0gf5wljc32nb-1.jpg


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

برای تبدیل فونت من این سایت را پیشنهاد میکنم: CodeAndMore @font-face made simple tool (http://fontface.codeandmore.com/)
فونت فاسی رو به سایت میدید و پک حاوی هر سه فونت مورد نیاز رو در یک فایل زیپ تحویلتون میده.و میتونید ازش استفاده کنید.البته ممکنه همه فونتها رو به درستی تبدیل نکنه.باید آزمون و خطا کرد.



پینوشت:

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

ادمین سی پی--- مدیریت استایل--- از منوی کشویی( تنظیمات منوی تولبار ویرایشگر ) را انتخاب کنید و به لیست سمت راست نام فونت مورد نظرتان را اضافه کنید.

نمونه:

http://cdn.vbiran.ir/images/imported/2012/04/zljh7iy2knv0wnx40l8u-1.jpg



http://cdn.vbiran.ir/images/imported/2012/04/ru3p9sr4ho9tv6kovs3p-1.jpg



پینوشت2: برای اینکه در ادیتور ویبولتین به صورت آنلاین تغییر فونت رو مشاهده کنید وارد قالب
editor_contents.css بشوید و در ابتدای آن همان کدی رو که به additionall.css اضافه کردید اضافه کنید.
یعنی این کد رو:



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





نمونه: http://cdn.vbiran.ir/images/imported/2012/04/zowg849gs8060fvlm2-1.jpg

کلبه دار
2012/04/05, 04:22 AM
درود



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

---------- ارسال شده در 04:41 AM ---------- ارسال قبلی در 04:22 AM ----------

واااااااااای ! :پی
یک سوتی "بد" دادم !!
بیخی
درس شد
کار نیز می کنه، همچو بوگاتی !
دمت گرررررررررررم داداشی علی
کلبه دار :sarma:

---------- ارسال شده در 04:54 AM ---------- ارسال قبلی در 04:22 AM ----------

آقا تنها، یک مشکل دارند این ها..
اینکه، وقتی توی ادیتور متنی رو انتخاب می کنیم و فونتی که اضافه کردیم رو براش انتخاب می کنیم، توی ادیتور تغییری بهش نمی ده. لیک، وقتی ارسالش می کنیم می بینیم که تغییر لحاظ شده..
کاری نمی شه کرد که توی ادیتور نیز با انتخاب فونت روی متنی که انتخاب کردیمش نیز تغییر لحاظ بشه ؟:|

AliBother
2012/04/05, 08:53 AM
........

کلبه دار
2012/04/05, 09:01 AM
علی، قالبی با عنوان
editor_contents.css</pre> وجود نداره..

AliBother
2012/04/05, 09:22 AM
.......

کلبه دار
2012/04/05, 09:52 AM
خب
با هم صحبتی داشتیم، و فهمیدیم که این قالب در ورژن های پس از 4.1.4 به بالا وجود داره
و بخاطر اینکه ورژن وی بولتین عزیز من 4.1.1 قدیمی هست، و ادیتورش نیز کاملاً متفاوت با ادیتورهای جدیده، لذا این قالب در این ورژن بدبخت من، وجود نداره..:(

Deadpool
2012/04/15, 08:01 PM
واقعاً جامع و کامل بود به جواب همه سوالهام رسیدم، ممنون علی جان :x

arpamonni
2012/06/03, 03:04 AM
حرف نداشت
من کدهاشو آماده کردم برای قرار دادن توی additional.ccs و editor_contents.css اگر کسی میخواد بگه بدم

Yasna
2012/09/14, 04:30 PM
برای من که کار نکرد

gidhems
2012/10/28, 12:15 AM
من تمام این کارارو مرحله ب مرحله انجام دادم ولی فونتم تغییر نمیکنه ، باید چکار کنم؟

ahmad.ghadimi
2012/11/06, 04:48 AM
این علی بوتر آقا اومده داره همه پستهاشو پاک میکنه جاش بیییبببب میره!
این چه وضعشه! جلوشو بگیرین بابا زد همه کاسه کوزه هارو خراب کرد!
اه

patoghiranian
2012/11/25, 12:29 PM
با تشکر
چندتا مشکل
فونت ها بعضیش رو نشون نمیده مثلا یکسری فوت برای محرم بود نشون نمیداد

مراحل رو رفتم ولی توی ادیتور همونطوری ثبت نمیکنه باید انتخاب کنیم کل کلامات رو بعد نوع فونت بدیم تا کار کنه مثلا برای یکسری فونت شکلک که من زدم خوب طرف نمیدونه الان چه شکلکی داره میزنه باید یک حرف رو بزنه پیش نمایش بزنه تا ببینه

برای فونت شکلک صفحه کلید باید انگلیسی باشه که اون شکلک رو بشه با فونت نشون داد چطوری میتونم فارسی رو هم بهش اضافه کنم

تشکر

shown
2012/12/08, 11:34 PM
پینوشت2: برای اینکه در ادیتور ویبولتین به صورت آنلاین تغییر فونت رو مشاهده کنید وارد قالب
editor_contents.css بشوید و در ابتدای آن همان کدی رو که به additionall.css اضافه کردید اضافه کنید.
یعنی این کد رو:



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





نمونه: http://cdn.vbiran.ir/images/imported/2012/04/zowg849gs8060fvlm2-1.jpg


این قسمت چرا هر کار میکنم انجام نمیشه؟

shown
2012/12/09, 12:02 PM
UP

alimot
2012/12/26, 05:00 PM
من کد چندتا فونت را توی additional.css ریختم قالب سایتم ریخت بهم چیکار کنم
لطفا راهنمایی کنید.

keratos2
2013/02/07, 05:19 PM
یه سوال این
additionall.css رو از کجا پیدا کنم؟

شهریار جون
2013/02/07, 05:40 PM
additionall.css رو در قسمت مدیریت ویبویلتین قسمت استایل ها جستجو رو بزنید و این قرار بدید در کادر و سرچ کنید پیدا می کنه براتون

keratos2
2013/02/07, 05:47 PM
اینکارو نمیکنه منو میبره به تنظیمات استایل ها

upppppppppppppppppp
میشه بگید چیکار کنم.سرچ میکنم ولی نمیاد میره به صفحه تنظیمات قالب ها

tajishop
2013/03/26, 11:45 AM
من تاهوما رو گذاشتم بهم نداد کسی اگه داره تبدیل شدشو بزارم ممنون میشم

davood01
2013/07/13, 11:21 AM
مو به مو رفتم . ولی اعمال نکرد .
حتی پکیج وب دیزاین را هم دانلود کردم . ولی نشد . :(

sib-forum.net
2013/07/23, 03:44 PM
آفرین!ممنون!

PouyaX
2013/09/04, 10:41 PM
قالب من این فایل رو نداره additionall.css
:'(x_x/:)

2013/09/13, 01:09 PM
از آموزشت خیلی استفاده کردم ولی اون سایت تبدیل فونت باید ثبت نام کنی و ثبت نامش هم پولیه فکر کنم

من از اینا استفاده کردم

font-face generator (http://everythingfonts.com/font-face)

font-face generator - Generate Custom Web Fonts, Create Web Fonts - svg, woff, eot, ttf, css (http://www.font-face-generator.com/)

mjavidm
2013/11/05, 02:45 PM
ضمن تشکر از کاربر محترم AliBother (http://www.vbiran.ir/members/alibother/)

بعد از کلی دردسر به این نکته آماتوری رسیدم:
ایشون در کد ها از آدرس fonts استفاده کردن و در روت فولدری با نام font ایجاد کردند
کاربرا حواسشون باشه که پوشه font رو به fonts تغییر بدن تا مشکل (اگه داشته باشند مثل ما حرفه ای نباشند) مشکل حل شه
و حتماً باید اول در additional.css کدها رو اضافه کنید و بعد در جاهای دیگه دوباره همون کد رو کپی کنید.

amir_opensource
2013/12/06, 12:53 PM
سلام
من طبق آموزش دوستمون توی additionall.css این کدها رو اضافه کردم به اول خط :


/**
* Theme Name: Metro
* Version: 1.0
* Author: Pixel Goose Studio
* Author URL: http://pixelgoose.com/
* Copyright (c) 2012 Pixel Goose Studio. All rights reserved.
* http://pixelgoose.com/
*/


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







ol#forums > li:first-child .forumhead {
margin-top: 0;
}


ولی هنوز فونت های انجمن کوچکترین تغییری نکرده ؟
ممنون میشم راهنمایی بفرمایید

Amirhossein2015
2013/12/06, 12:58 PM
سلام
من طبق آموزش دوستمون توی additionall.css این کدها رو اضافه کردم به اول خط :


/**
* Theme Name: Metro
* Version: 1.0
* Author: Pixel Goose Studio
* Author URL: http://pixelgoose.com/
* Copyright (c) 2012 Pixel Goose Studio. All rights reserved.
* http://pixelgoose.com/
*/


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







ol#forums > li:first-child .forumhead {
margin-top: 0;
}


ولی هنوز فونت های انجمن کوچکترین تغییری نکرده ؟
ممنون میشم راهنمایی بفرمایید

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

آموزش تغییر فونت انجمن به Tahoma (تاهما) در ویبولتین 4 (http://www.vbiran.ir/thread1082.html)

amir_opensource
2013/12/06, 01:22 PM
من که کلافه شدم بخدا .فونت های Header و Footer و نوشته ها رو به Yekan تغییر دادم ولی بازم هنوز فونت انجمن Tahoma هستش .

sgmy
2014/01/17, 10:22 AM
من نتونستم ثبت نام کنم



برای تبدیل فونت من این سایت را پیشنهاد میکنم: CodeAndMore @font-face made simple tool (http://fontface.codeandmore.com/)
یا یکی دیگه را معرفی کنید یا راهنمایی کنید

Ultr4.Froz3n
2015/05/21, 06:37 PM
فایل پیوست پاک شده لطفا کسی داره پیوست کنه

Mr.AryA
2015/05/21, 06:45 PM
فایل پیوست پاک شده لطفا کسی داره پیوست کنه
:x
43091

Ultr4.Froz3n
2015/05/21, 06:57 PM
@MyBirds (http://www.vbiran.ir/members/mybirds/)
koodakam dari ? damet jiz

Mr.AryA
2015/05/21, 07:06 PM
@MyBirds (http://www.vbiran.ir/members/mybirds/)
koodakam dari ? damet jiz
:x

43092

Ultr4.Froz3n

Mr.AryA
2015/05/21, 07:15 PM
ی
از چه سایتای استفاده میکنین واسه تبدیل
Online font converter (http://www.fontconverter.org)
&
http://www.kirsle.net/wizards/ttf2eot.cgi

:x

mahdi.b20
2015/06/04, 12:36 PM
برای وردپرس جواب میده؟

sinadalvand
2015/07/27, 02:03 PM
با سلام

دوستان من تغییر فونت رو انجام دادم و فونت به بخش ویرایشگر اضافه شد ولی یه مشکل دارم اینه که در هنگام ویرایش فونت به اون شکلی در میاد که انتخاب کردم ولی همین که اون پست رو ارسال میکنم فونت به حالت ساده برمی گرده چکار کنم؟

Mr.AryA
2015/07/27, 02:57 PM
با سلام

دوستان من تغییر فونت رو انجام دادم و فونت به بخش ویرایشگر اضافه شد ولی یه مشکل دارم اینه که در هنگام ویرایش فونت به اون شکلی در میاد که انتخاب کردم ولی همین که اون پست رو ارسال میکنم فونت به حالت ساده برمی گرده چکار کنم؟کدی که به ادیشنال وارد کردید یک جاش مشکل داره

Right
2015/12/14, 04:07 AM
سلام. فونت پیوست شده کجاست. من ندیدم؟

Mr.AryA
2015/12/14, 01:23 PM
سلام. فونت پیوست شده کجاست. من ندیدم؟
بفرمایید