الحاق فونت دلخواه به صفحه با استفاده از css

۱۴ دیدگاه
چگونه فونت دلخواهمان را به سایت خود الحاق کنیم؟

سلام

احتمالا در حال وبگردی سایت هایی را دیده اید که از فونت های عجیب و غریب استفاده می کنند و شاید از خود پرسیده باشید که این کار را چگونه انجام می دهند.در حالت معمولی در زبان ایرانی ما،اکثرا از فونت های tahoma و arial استفاده می شود که در تمام کامپیوترها موجود است.حالا اگر بخواهیم یک فونت بخصوص را که ممکن است در رایانه بیننده نباشد،استفاده کنیم شاید در هنگام نمایش چیدمان صفحه کلا تغییر کرده و بر هم بخورد.با آمدن css3 این مشکل نیز برطرف شده است و با استفاده از خصوصیت font-face می توانیم به راحتی انواع قلم ها را به سایت خود،الحاق کنیم تا اگر در رایانه بیننده نبود،توسط مرورگر دانلود شده و مورد استفاده قرار گیرد.این کار زیاد سخت نیست،در ادامه خواهیم دید:

احتمالش هست که دوست داشته باشید از فونت های زیبای انگلیسی که تعدادشون هم کم نیست،استفاده کنید.در این صورت انتخاب هایتان نامحدود خواهد بود.بهترین راه استفاده از کیت های فونت است که حاوی انواع مختلف یک نوع فونت هستند که اکثرا دارای پسوندهای  ttf,eot,svg و woff می باشند.مزیت این کیت های این است که با داشتن انواع مختلف یک فونت،می تواند نمایش درست قلم مورد نظر شما را در هر نوع وسیله ای از موبایل یا تبلت و رایانه تضمین کند.چیزی که در مورد انواع فارسی حداقل بنده چیزی در این مورد ندیدم.خودم از سایت FontSquirrel استفاده می کنم. نحوه استفاده به این صورت است:

@font-face {
	font-family: 'ZendaRegular';
	src: url('Zenda-fontfacekit/zenda-webfont.eot');
	src: local('Zenda Regular'), local('Zenda'), url('Zenda-fontfacekit/zenda-webfont.ttf') format('truetype');
}

همانطور که می بینید،این کد فونت شما را تعریف می کند و می توانید با نام دلخواهی که جلوب خصوصیت font-family می گذارید در همه جای سبک تان به آن دسترسی یابید.مثل:

h1 {
  font-family: 'ZendaRegular', Arial, sans-serif;
}

فقط توجه داشته باشید که مرورگرهای مدرن مثل opera قادر به انجام این کار هستند. نمونه ای را در ذیل مشاهده می کنید.می توانید این کیت را از اینجـــا دریافت کنید.

در همین رابطه :   ایجاد نوار شناور اطلاع رسانی رایگان hellobar.com با jQuery

Iran Fotolia Font Embedding Example

دسته بندی : CSS

14 نظر

  1. بازتاب: Elshan Graphic – پرتال تخصصی دانلود و آموزش گرافیک | ائلشن گرافیک
  2. بازتاب: راهنمای آسان برای طراحی موفق تایپوگرافی | وبلاگ یاهوا
  3. سلام.

    دوست عزیز مطلب رو کامل مطالعه کردم اما در نهایت متوجه نشدم برای استفاده از فونت های متنوع فارسی در وبسایت، باید چیکار کنیم.

    1. سلام دوست من
      متشکرم از لطف شما و معرفی سایت .ولی این سایت ها معمولا از فونت های فارسی پشتیبانی نمی کنند .انشالله در آینده یک روش ایرانی رو برای همین کار یعنی تبدیل فونت های فارسی به فایل javascript و الحاق اون به صفحه توضیح خواهیم داد که تا حد زیادی مشکل سایت های فارسی رو حل خواهد کرد

      موفقیت

  4. تشکر من فونت adobe arabic را استفاده می کنم و ۳۰۰kb حجم دارد ایا من می توانم که این فونت را compress یا فشرده کنم.

    1. سلام دوست عزیز

      کدهای css وابسته به سیستم مورد استفاده نیستن .هر جایی که html باشه میشه css هم استفاده کرد.چه در یه سایت استاتیک و چه در جوملا ، وردپرس و …

      موفقیت

  5. سلام

    دوست عزیر متاسفانه در نسخه ۶ مرورگر فایرفاکس استفاده از تکنیک فوق سبب می شود که کلمه ها از هم جدا شوند. ولی در فایرفاکس نسخه های قبل این مشکل نبود. الان اگر شما نیز فایرفاکستونو update کنید این مشکل را در همین صفحه هم می بینید. آیا راهی برای رفع این مشکل وجود دارد؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

  6. بسیار مفید و عالی .ممنون . امیدوارم روزی بیاد که بزرگترین مرجع آموزش اسکریپت به زبان فارسی باشید … بسیار عالی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *