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

14 دیدگاه
چگونه فونت دلخواهمان را به سايت خود الحاق كنيم؟

سلام

احتمالا در حال وبگردي سايت هايي را ديده ايد كه از فونت هاي عجيب و غريب استفاده مي كنند و شايد از خود پرسيده باشيد كه اين كار را چگونه انجام مي دهند.در حالت معمولي در زبان ايراني ما،اكثرا از فونت هاي 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 قادر به انجام اين كار هستند. نمونه اي را در ذيل مشاهده مي كنيد.مي توانيد اين كيت را از اينجـــا دريافت كنيد.

در همین رابطه :   دانلود منوی زیبای جی کوئری به صورت Responsive

Iran Fotolia Font Embedding Example

دسته بندی : CSS

14 نظر

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

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

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

      موفقیت

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

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

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

      موفقیت

  5. سلام

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

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

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

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