اضافه کردن فونت به فریمورک YT Framework ???

[topmihan 11]

سلام دوستان

من میخوام به قالبی که دارم و از فریمورک YT Framework بهره میبره فونت اضافه کنم

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

ممنونم

[alishahi90 14]

اینکار دو مرحله دارد:

1.افزودن فونت به فایل template-options.xml

2.افزودن کد های css

برای مرحله اول این فایل را باز کنید (این فایل در قالب شماست. برای مثال در آدرس: templates/gantry/ می باشد.) و دنبال کد زیر بگردید:

کد:

<option value="geneva">Geneva</option>

سپس پس از این کد، کد زیرا بنویسید:

کد:

<option value="mywebfont">MyWebFont</option>

MyWebFont نام فونت شماست که با توجه به نام فونت شما نوشته می شود. این فایل را ذخیره کنید و فایل template-rtl.css و یا template.css را واقع در پوشه css در نسخه های قدیمی و در نسخه های جدید (4.0 و 4.1) فایل template-rtl.less و یا template.less را که در پوشه less واقع است باز کنید. برای مثال آدرس templates/gantry/less.

توجه داشته باشید در صورتی که می خواهید فونت شما در همه ی زبان ها لود شود، وارد فایل template و در صورتی که می خواهید فقط برای زبان های راست چین مثل فارسی و عربی لود شود وارد فایل template-rtl شوید.

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

کد:

@font-face {

font-family: 'MyWebFont';

src: url('../fonts/webfont.eot'); /* IE9 Compat Modes */

src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../fonts/webfont.woff') format('woff'), /* Modern Browsers */

url('../fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */

url('../fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

}

توجه داشته باشید که باید فونت خود را ابتدا با فرمت ttf در اینترنت پیدا کرده و سپس با استفاده از ابزار زیر به فرمت های eot و woff و Svg نیز تبدیل کنید:

Create Your Own @font-face Kits | Font Squirrel

فقط یک نکته ای را هم اشاره کنم اینکه این سایت خودش یک نسخه ttf دیگر از فونت نیز به شما می دهد. در صورتی که فونت شما کارنکرد، از فونت اصلی که قبلا در اینترنت با فرمت ttf پیدا کردید استفاده کنید.

همچنین اشاره کنم که فونت شما باید در مسیر templates/gantry/fonts آپلود شود که gantry نام قالب شماست. همچنین به جای MyWebFont باید نام فونت خود را بنویسید.

سپس برای افزوده شدن فونت به پارامتر اعمال شده در گنتری، کد زیرا به همین فایل اضافه کنید:

کد:

.font-family-mywebfont {font-family: 'MyWebFont', Tahoma, sans-serif;}

باید در این کد هم به جای MyWebFont و هم mywebfont که در کلاس font-family-mywebfont آماده است، نام فونت خودتان را بنویسید. به این صورت:

کد:

.font-family-koodak {font-family: 'Koodak', Tahoma, sans-serif;}

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

[topmihan 11]

گاهی وقت ها دقت خیلی خوبه

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

پست زدن مهم نیست پست صحیح زدن مهمه

لطفا اگه کسی میتونه منو راهنمایی کنه

ممنونم

[alishahi90 14]

دوست عزیز من هواسم نبود یه نگاه میکنم به زودی براتون اموزش رو قرار میدم

[حجت مردانه زاده 596]

باسلام

روند و اصول در تمامی فریم ورکها و همچنین غیرفریم ورک ها یکی هست.

کار به این صورت هست که همیشه مرورگر فونتی که بروی ویندوز شخصی(سیستم فرد) نصب شده میخونه؛ خب حالا اگر ما فونتی رو در CSS تعریف کردیم که کاربر بروی سیستم خودش نداشت؛ وضعیت اون بخشی که فونتی خاصب بهش اختصاص داده شده چی میشه!؟ کاملا طبیعیه که کاملا بهم میریزه و تمامی تنظیمات و ست کردن های ؛ عملاً بی فایده میشه.
خب برای حل این مشکل بهترین راهکار اینه که فونت ، دقیقا عین سایر اجزای سایت ما؛ بروی سرور (هاست)آپلود بشه. (ترفند فونت فیس - FontFace )


گام اول:
ایجاد فولدری بنام fonts در پوشه قالب ، یعنی این مسیر: Sitename.com/templates/MyTem/fonts

خب حالا فونتهای استانداردسازی شده ی خودتون رو داخل مسیر فولدر بالا آپلود کنید.
برای راحتی و تست بهتر, کار چند فونت فارسی استاندارد روبرای شما آپلود کردم.میتونید از لینک زیر دانلود کنید
fonts دانلود ● آپلود سنتر انجمن جوملای ایران

اسامی فونتها : ( BCompset - BKoodakBold - BShiraz - BTehran -BTitrBold - BTitrTGEBold - BYekan )



نکته* فونتهایی که میخواهید بعنوان یک فونت کاستومایزشده در قالبتون قرار بدید .میبایست تحت سه استاندارد woff - eot - ttf فرمت بندی شده باشند.این کار رو میتونید در سایتهایی از قبیل Create Your Own @font-face Kits | Font Squirrel انجام بدید.اگر فونت دیگری غیر از فونتهای بالا در نظر دارید؛ میتونید از این سایت فونت خود را تحت استانداردهای بالا تولید کنید.

گام دوم :

قرار دادن دستورهای کلی و جزئی فونت فیس در فایل CSS مدنظر هست.
شما میبایست کد زیر را در ابتدا فایل و یا انتهای فایل CSS (بعد از بسته شدن آخرین تگ) قرار بدید.

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

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

مرحله ی بعدی تعویض فونتهای بکار گرفته شده در کلیه اجزای تشکیل دهنده ی یک سایت هست.(هدرها؛ عناوین؛ مطالب؛ متن اصلی و...)

آخرین نکته: قالبهایی که تحت فناوری ریسپانسیو ایجاد شده باشند، چون عملاً از فایل ریسپانسیو خونده میشن, پس دقت کنید که عملیات بالا در اینها ممکنه که انجام بشه.

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

امیدوارم که توضیجات مکفی بوده باشه

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

[topmihan 11]

سلام

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

ولی منظور من این نیست

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

من میخوام بتونم چند فونت فارسی در کنار این ها بذارم تا شخصی که قالب رو تهیه میکنه بصورت گرافیکی بتونه از بین این ها فونتشو انتخاب کنه

الان اونجا فقط فونت های انگلیسی هست که من میخوام فونت ای فارسی هم بهش اضافه بشه

منظور من این بود

ممنون میشم اگه کسی منو راهنمایی کنه

[حجت مردانه زاده 596]

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

برای اینکار دو بخش وجود داره.

1- فونتهایی که فریم ورک ها تعریف میشن و مربوط به استاندارد و آرشیو جهانی گوگل فونت هست ( https://www.google.com/fonts ) .

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

2

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

خب حالا یه نکته* پیشنهاد میکنم یه ترفندی بزنید.یکی از فونتهایی که در فریم ورک تعریف شده رو انتخاب کنید.از جایگزینی استفاده کنید.یعنی در تمامی جاهایی که ردپای اون وجود داره شما هم جای اون؛ فونت فارسی دلخواهتون رو جایگزین کنید.اینجوری اگر به برنامه نویسی اشنایی چندانی نداشته باشیدغ میتونید سریعا به هدفتون برسید.

تست کنید... :yoho: