زمان کنونی: ۱۰-۱-۱۴۰۳, ۰۹:۱۳ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش استفاده از فونت های مختلف در سایت font-face
۲۳-۱۱-۱۳۹۰, ۰۸:۱۶ عصر
ارسال: #1
آموزش استفاده از فونت های مختلف در سایت font-face
آموزش استفاده از فونت های مختلف در سایت

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

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



این آموزش توسط کاربر zigoratsoft منتشر شده


*قرار دادن فونت جدید و لود شدنش در سایت توصیه نمی شه، چون باعث کندی در بالا اومدن صفحه سایت می شه و ترجیحا برای زبان فارسی همیشه از فونت tahoma استفاده کنید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدسلیمانی ، MARKO ، farjadp ، Reza Ganji ، btheme ، محمدرضا بهارلو ، محمد حسین شکوری ، شاهین سمیع عادل ، shahnaz ، سید منصور فیروزه ، takkonkor ، memare-ahvaz ، clik8000 ، امید ، m-amin ، rezaetemadi ، gamentech ، sadeghi ، sajad_salehi ، behzadmed ، younesf ، khazar ، aslanshvili ، Pourdaryaei
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان