نصب فونت در وب سایت

آموزش استفاده از فونت در سایت – نصب فونت فارسی در وب سایت

     استفاده از فونت در سایت

یکی از قابلیت های خوب افزوده شده به CSS3 امکان استفاده از فونت های فارسی محبوب سیستم عامل ها برای نمایش در وب سایت می باشد. ابتدا در وب سایت به طور معمول تنها از فونت های خاصی پشتیبانی می شد. سپس طراحان به فکر راه حل این مشکل افتادند تا اینکه در CSS3 از خاصیتی با نام font-face@ استفاده کردند.

آنچه در این مقاله می خوانید ...

خاصیت font-face@ برای رفع محدودیت استفاده از فونت های خاص در وب تعریف شد، اما متاسفانه این خاصیت تنها در برخی مرورگر های به روزتر ، به طور کامل  پشتیبانی می شود.

مرورگرهای موزیلا ، اپرا ، کروم و سافاری از این خاصیت به صورت پیش فرض ( از دو فرمت ttf. و otf. ) استفاده می کنند. مرورگر اینترنت اکسپلورر از نسخه 9 به بعد و از فرمت eot. پشتیبانی می کند و در نسخه های قدیمی تر از هک های css استفاده می شود. ضمنا مرورگرهای جدید از فرمت woff. نیز استفاده می کنند.

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

آموزش استفاده از فونت در وب

     مزایا و معایب استفاده از فونت فارسی در وب

همان طور که می دانید فونت های از پیش تعریف شده و استاندارد امن وب برای زبان فارسی محدود به چند نوع از جمله ( Tahoma ، Arial و…) است . استفاده از فونت های دیگر به دلیل تنوع، زیبایی و کمک به خواناتر شدن مطالب می تواند مفید باشد، اما متاسفانه این کار موجب افزایش حجم کلی صفحه وب شده و در مجموع باعث کندتر شدن سرعت بارگذاری صفحات می شود.

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

     تبدیل فونت های فارسی برای استفاده در وب

از آنجایی که در حالت معمول فونت های فارسی محبوب سیستم عامل ها دارای پسوند ttf. هستند، لذا سایر فرمت ها را باید با تبدیل از این فرمت بدست آوریم، برای تبدیل فرمت ttf. به دیگر فرمت ها چندین سرویس آنلاین در وب وجود دارد که متاسفانه در مورد فونت های فارسی، تنها برخی از آن ها و از برخی فرمت های خاص به درستی پشتیبانی می کنند.

برخی از سایت های موجود در این زمینه که کافی است فایل با فرمت ttf. را در این سرویس ها آپلود کنید تا در کم ترین زمان، فایل های مورد نیاز برای استفاده در وب را دریافت نمائید

www.onlinefontconverter.com      www.font2web.com      www.fontsquirrel.com/fontface/generator

نکته: برای کار با این سایت ها، از برنامه های جانبی مانند Download Manager استفاده نکنید.

چند نمونه از فونت های محبوب مورد استفاده در سایت ها عبارتند از :

B Yekan  B Titr  B Koodak  B Roya  Iranian sans  B Traffic

    انواع فرمت های فونت وب سایت:

  • پسوند eot: این فرمت را مایکروسافت برای استفاده در وب معرفی کرد و تنها در مرورگر وب اینترنت اکسپلورر (Internet Explorer) قابل استفاده است.
  • پسوند ttf: شرکت اپل این فرمت را توسعه داد و از آن زمان به بعد به عنوان فرمت استاندارد فونت ها شناخته شد. بیشتر مرورگرها وب به غیر از اینترنت اکسپلورر از این فرمت پشتیبانی می کنند.
  • پسوند woff: این فرمت را فایرفاکس ایجاد کرد و تنها فرمتی است که تمامی مرورگرهای مدرن و حتی اینترنت اکسپلورر ۹ به بعد از آن پشتیبانی می کنند.

نصب وب فونت

شاید نام پسوند svg را نیز شنیده باشید. فرمت svg برای تصاویر مقیاس پذیر بوده و برای فونت های فارسی قابل استفاده نیست .

     استفاده از Google Fonts یا فونت های گوگل

Google Fonts فونت های متنوع و متعددی را خصوصا برای زبان انگلیسی در اختیار شما قرار می دهد. در میان این فونت ها، یکی دو تا فونت فارسی زیبا برای نمایش نیز به چشم میخورند. اگر بخواهید بجای فونت های آپلود شده روی هاست خود از فونت های گوگلی استفاده کنید، میتوانید از دو روش مختلف استفاده کنید. روش اول فراخوانی فونت در فایل CSS شما با دستور import@ :

  • @import url(//fonts.googleapis.com/css?family=Open+Sans);
  • @import url(//fonts.googleapis.com/css?family=Open+Sans);

روش دوم فراخوانی فونت با استفاده از تگ link در html است. در این حالت میتوانید فونت دلخواه را در ناحیه head سایت خود به شکل زیر صدا کنید :

  • <link href=’//fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>
همچنین بخوانید...!

3 پاسخ به “آموزش استفاده از فونت در سایت – نصب فونت فارسی در وب سایت”

  1. bahareh گفت:

    خیلی ممنونم از راهنمایی شما

  2. amc mcq گفت:

    If some one desires expert view concerning running a blog then i
    recommend him/her to visit this blog, Keep up the pleasant job.

  3. mobile legends hacker گفت:

    I’ve been surfing on-line greater than 3 hours as of late, yet I
    never discovered any fascinating article like yours.

    It’s pretty price sufficient for me. In my opinion, if all
    webmasters and bloggers made excellent content material as you probably did,
    the web shall be a lot more useful than ever before.

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

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