طراحی فونت آیکون اختصاصی

پیش از این طراحان وب آیکون‌ های مورد نظر خودشون رو در قالب عکس (معمولا فرمت PNG) ذخیره می‌کردن و اون‌ها رو از طریق HTML یا CSS در سایتشون مورد استفاده قرار می‌دادن. این کار ایراد بزرگی داشت: وقتی که طراح قصد داشت یک آیکون رو در چندین سایز و یا رنگ‌های متنوع به‌کار بگیره، باید اون آیکون رو با سایزها و رنگ‌های مختلف و به تعداد مورد نیاز می‌ساخت که این کار خیلی سخت و خسته‌کننده‌ بود که امروزه با طراحی آیکون بصورت فونت تمامی این مشکلات به خوبی برطرف شده است.

خدمات نوین راهکار تات
هارمونی مناسب

تناسب مناسب در طرح ها، رنگ ها، تصاویر، آیتم ها، تم سایت و …

خدمات نوین راهکار تات
سرعت بارگزاری

سرعت بالای بارگذاری و لودینگ با رعایت اصول فنی

خدمات نوین راهکار تات
انطباق با موضوع

هماهنگی و تناسب موضوع و محتوا و رعایت اصول محتوا گذاری

خدمات نوین راهکار تات
طراحی زیبا

زیبایی بصری و طراحی شیک و منحصر به فرد با جدیدترین متد های روز دنیا

خدمات نوین راهکار تات
امکانات بهینه

بهره گیری از جدیدترین و به روزترین ابزارهای روز دنیا

خدمات نوین راهکار تات
طراحی کاربردی

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

طراحی فونت آیکون اختصاصی

مزایای طراحی فونت آیکن اختصاصی

  • سایت تنها یک بار درخواست لود آیکون‌ها رو به سرور شما می‌فرسته (برخلاف png ها که به تعداد آیکون‌ها باید HTTP request ارسال بشه). استفاده از CSS Sprite هم با این‌که این مشکل رو به مقدار زیادی حل می‌کنه، ولی هنوز سایر ایرادات آیکون‌های png رو به‌همراه داره.
  • آیکون‌فونت‌ها حجم خیلی پایینی دارن و به سرعت دانلود میشن.
  • تقریبا تمام مرورگرها (حتی اینترنت اکسپلورر ۶) هم اونا رو پشتیبانی می‌کنه.
  • خیلی ساده می‌شه سایزشون رو تغییر داد.
  • خیلی ساده می‌تونید رنگ‌شون رو تغییر بدید.
  • خیلی ساده می‌شه استایل‌هایی مثل سایه‌ها (text-shadows) و opacity و… رو براشون به‌کار برد.
  • در صفحه نمایش های UHD مشکل افت کیفیت پیدا نمی‌کنند (اگر فایل آیکون png شما با رزولوشن و اندازه خیلی بزرگ ساخته بشه، این مشکل به‌وجود نمی‌آد، ولی این فایل با این کیفیت و رزولوشنِ خیلی زیاد، حجم خیلی سنگینی هم به‌همراه داره).

معایب طراحی فونت آیکن اختصاصی

  • یه طراحی یا عکس پیچیده رو نمی‌شه با  طراحی فونت آیکون‌ اختصاصی پیاده‌سازی کرد. فونت آیکون ها معمولا برای آیکون‌ های ساده کاربرد دارن.
  • فونت آیکون ها معمولا تک‌ رنگ هستن و اگر نیاز به طیف‌ های‌ رنگی (gradient) داشته باشن، باید از حقه‌های CSS استفاده کنین.
  • از آیکون‌ فونت‌ ها نمی‌شه انتظار تمیزیِ پیکسلی (pixel perfection) داشت. طرح‌های بیتمپ، این اختیار رو به طراح می‌دن که کنترل کاملی روی هر پیکسل داشته باشه، ولی آیکون‌فونت بنا بر ذات وکتور (خطی) فونت‌ها، قدرت کنترل در سایزهای مختلف رو از طراح می‌گیرند و البته نمایش فونت‌ها در مرورگرهای مختلف تا حدی درصد خطا به‌همراه داره و متفاوت نشون داده می‌شه. توجه داشته باشید که این خطاها فقط در حد پیکسل هست و درنتیجه در اندازه‌های بزرگ و یا صفحه‌های نمایش با وضوح بالا، تاثیر زیادی نخواهد داشت.