استفاده از فونت های آپلود شده در هاست در صفحات وب

- visibility ۵۷ mode_comment

امروز قصد دارم آموزش چگونگی تغییر فونت سایت رو خدمتتون ارائه بدم. برای اینکه فونت سایتتون رو عوض کنید ، دوتا روش وجود داره،روش اول اینه که سورس سایت رو دستکاری کنید و مثلأ اگه فونت سایت شما Tahoma  هست، اونو عوض کنید و بذارید که فونت دیگه ؛مثلأ Arial ،اما مشکل این روش اینجاست که فونت جدید در صورتی روی مرور گر بیننده ی سایت شما اجرا میشه که اون فونت روی سیستم اون کاربر نصب شده باشه،اما من امروز روشی رو خدمتتون ارائه می کنم تا بتونید فونت سایتتون رو به هر فونت دیگه ای که بخواید تغییر بدید و حتی اگه اون فونت روی کامپیوتر بیننده نباشه،باز هم توی مرور گر کاربر نشون داده بشه!

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

فونت ها برای اجرا روی هر مرورگر،نیاز هست که فرمتشون یه چیز خاص باشه،مثلأ اینترنت اکسپلوریر فونت eot  رو نمایش میده و گوگل کروم فونت woff رو میتونه نمایش بده،پس برای اینه سایتمون فونتش توی همه ی مرور گرها یکی باشه،باید فونتمون رو که با فرمت ttf هست،به دوتا فرمت دیگه که گفتم هم تبدیل کینم و بعد سه تا فایل که همشون یه فونت هستن و فقط فرمتشاون فرق می کنه رو باید روی هاست قرار بدیم.

شروع آموزش تغییر فونت:

برای اینکار باید فونت رو علاوه بر فرمت ttf  که خودش هست،به دو تا فرمت دیگه تبدیل کنیم(بعضی سایت ها این کار رو میکنن براتون)

بعد اونو توی هاست قرار بدیم(من یه پوشه میسازم با نام font  و فونت ها رو قرار میدم داخل این پوشه.

حالا هر کرکدوم از صفحاتی که خواستید فونتش تغییر کنه،باید عبارت زیر رو قبل از تگ </head>

توی اون صفحه قرار بدیم.

توضیح:اگه در کد بالا دقت کنید،بین دوتا علامت ' ' نوشتم BDavat ، این همون اسم فونت مورد نظر منه که توی هاستم آپلودش کردم

حالا اگه دقت کنید می بینید من سه جا نوشتم

من سه بار فونتمو با سه فرمت متفاوت معرفی کردم و هربار گفتم که اگه فلان مرور گر بود،فونت با فلان فرمت اجرا بشه؛اول هر سه آدرس هم نوشته font/ که این اسم پوشه ای هست که روی هاسته و فونتا داخلشن.

آخر کد هم می بینید که نوشتم:

که با این دستور کلاس رو تعیین کردیم و بعد از اسم فونت مورد نظرمون،نوشتیم Tahoma،این بدین معنی هست که در صورتی که اشکالی در اجرای فونت مورد نظر بوجود اومد یا روی هاست نبود،فونت Tahoma جایگزینش بشه.

اما ادامه :

حالا اگه این کد بالا توی صفحه باشه ، اتفاقی نمیفته و فونت تغییر نمی کنه، پس چه باید کرد؟؟؟

جواب : هر کدوم از متن هایی که خواستید فونتش تغییر کنه،باید کلاسشو برابر همین کلاسی که تعریف کردیم قرار بدین،یعنی چه؟؟

یعنی مثلأ اگه شما متن زیر رو توی یه صفحه دارید:

به این شکل تغییرش بدید:

ما تنها کاری که کردیم،این بود که توی تگ فونت،عبارت class="BDavat" رو اضافه کردیم.

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

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

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

comment دیدگاه کاربران
امین

تو سایتش رفتم ثبت نام هم کردم اما وقتی تو قسمت منیجر میرم نمیدونم چه طوری آپلود کنم 🙁

لقمان آوند

خوب بگرد دنبال یه دکمه آپلودی آیکونی …
تو کدوم یکی ثبت نام کردی ؟

کاظم

سلام اقای لقمان خسته نباشید.ببخشیدبرای اینکه فونت متون داخل یک تگdiv،فونت اپلودشده ی موردنظرماباشدازچه کدی استفاده کنیم باتوجه به اینکه من هاست ندارم؟
منظورم کدcssهست

سجاد دریس

سلام.
خب بعد از اینکه فونت مورد نظرتون رو داخل فایل css وارد کردین، font-family تگ div رو با نام فونتتون مقدار دهی کنید.

کاظم

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

سجاد دریس

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

کاظم

سلام،خسته نباشید.من کدزیرروتویه فایلcssگذاشتم:
@font-face {
font-family: ‘BYEKAN’;
src: url(‘http://p30graphic.rozup.ir/byekan_webfont.eot?#’) format(‘eot’), /* IE6–8 */
url(‘http://uploadpa.com/beta/12/4bjd4743thizs6xm386.woff’) format(‘woff’), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url(‘http://uploadpa.com/beta/12/25raefng9rtr60xn20xa.ttf’) format(‘truetype’); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
وهمچنین فونت روداخل فایلhtmlاستفاده کردم،ولی فونت متن تغییرنمی کنه لطفاایرادشو برطرف کنید.ممنون میشم

لقمان آوند

آیا مرورگری که با اون صفحه وب رو می بینید css3 رو پشتیبانی می کنه ؟
با چنین مرورگری تست کردید ؟

کاظم

سلام،مرورگرمن فایرفاکس17است.توinternet explorerوoperaهم کارنمی کنه.شماخودتون یه بارهمین کدمن رواستفاده کنیدببینیدچطوریه؟

لقمان آوند

سلام
مشکلت رو توی انجمن مطرح کن به جواب میرسی

آذرنوش

یه سایت می خواهم بهتون معرفی کنم . این سایت یک دایرکتوری قوی فونت فارسی است که به جرات می تونم بگم یکی از بهترین ها هم هست. امکانات بسیار زیاد و قوی داره.یکی از مهم ترین و ویژه ترین امکانات این سایت ارائه ی کد تشخیص اتوماتیک مرورگرکاربر سایت شما و نمایش فونت بر اساس فرمت مورد پشتیبانی مرورگر کاربر است که باعث کاهش سرعت لود سایت شما نسبت به استفاده از دیگر سرویس ها و کدهای وب فونت ها می باشد.

برخی از امکانات این سایت:

مقالات فونت
دسته بندی فونت ها
پیشنمایش فونت
دانلود تمامی فونت ها در پک های مجزاء
دانلود فونت با دو پسوند OTF و TTF
نمایش شناسنامه ی فونت
نمایش آنلاین نقشه کلمات
تست آنلاین قوی و زیبا فونت
ارائه ی کد CSS برای استفاده در طراحی وب ( وب فونت API )

امیدوارم از این سایت مفید نهایت استفاده رو ببرید.
آدرس سایتش:
http://www.awebfont.ir

iman

اقا من الان فایل ضمیمتون رو دانلود کردم
هیچی نشون نداد که…
اصلا وقتی index.php رو باز کردم چیزی توش نبود
نکنه قرار خودمون بنویسیمش 💡

لقمان آوند

فایل فونها رو می گید ؟ مشکلی نداره که …

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3