استفاده از فونت به جای آیکون در طراحی سایت

کم بودن فونت های فارسی یکی از عمده ترین مشکلاتی بود که در وب فارسی با آن روبه برو بودیم. برای زبان فارسی فقط سه فونت Tahoma ، arial ، mono-type موجود بودند در حالی که برای زبان انگلیسی حدود ده فونت در دسترس بود. در گذشته طراحان از روش های متفاوتی برای طراحی فونت استفاده می کردند عمومی ترین روش آن ها ، نوشتن فونته مورد نظرشان در یک نرم افزار گرافیکی و انتقال آن به طرحشان بود. مثلا زمانی که یک آیکن به صورت معمولی یا sprite در سایت استفاده می شد ، مرورگر می بایست زمانی را صرف خواندن این عکس ها می کرد که موجب کاهش سرعت لود شدن می شد. به غیر از این موضوع اگر سایتتان را رسپانسیو می نوشتید ، مجبور بودید برای رزولشن های پایین از آیکون های کوچیک تر استفاده می کردید ، آن وقت لازم بود یک آیکن را با چندین سایز متفاوت sprite می کردید.

اما به تازگی راه حلی که می تواند مورد استفاده قرار بگیرد ، به کار گرفتن فونت ها است. البته این روش هم مشکلاتی دارد که رفع آن ها را ادامه گفته ایم…

اضافه کردن فونت در CSS

در همه ی سیستم ها مقدار زیادی فونت وجود دارد که گاها شاهد کارکتر space در نام آن ها هستیم. میدانیم وجود کارکتر space در دستوراتی که اسمی را اعلام می کند غلط است. پس باید به دنبال راهی باشیم که فونت مورد نظر ما در CSS اضافه شود. کد زیر برای اضافه کردن فونت در css می باشد :

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

در این مرحله این سوال بوجود می آید که برای این کار از چه فونت هایی می توان استفاده کرد؟ با گسترش این تکنولوژی سایت های زیادی شروع به فعالیت کردند و فونت ها و کتابخانه های زیادی در دسترس طراحان قرار گرفت. یکی از کاربردی ترین کتابخانه ها در این ضمینه Font Awesome Icons می باشد که موجب تحولی بزرگ در صنعت طراحی وب سایت شد زیرا دیگر نیازی به استفاده از آیکون های تصویری نیست. این کتابخانه ی کوچک اما بسیار کاربردی دارای دارای مقدار فراوانی آیکون در قالب فونت می باشد. بر عکس آیکون های تصویری تغییر سایز این آیکوون ها بدون کاهش کیفیت است و به راحتی انجام می شود. یکی دیگر از مزیت های آن رایگان بودنش است که به راحتی د دسترس طراحان و توسعه دهندگان وب سایت ها قرار می گیرد. در ادامه روش استفاده از این کتابخانه را آموزش میدهیم. با ما همراه باشید…

گام اول؛ Awosome را دانلود می کنیم.

گام دوم؛ فونت ها را در پوشه ای به نام fonts جای می دهیم. سپس یک پوشه ی CSS ایجاد می کنیم و فایل CSS را در آنجا ایجاد می کنیم. با کد زیر فونت Awosome را در آغاز فایل CSS امان تعریف می کنیم.

گام سوم؛ حال 80 در صد کار انجام شده تنها باید هر کارکتری را که تمایل داریم از فایل CSS ی که دانلود کرده ایم و در فایل اصلی جاگذاری نماییم و آن ها را مورد استفاده قرار دهیم. مثلا قصد داریم سه کارکتر توییتر ، فیس بوک و گیت هاب را در سایتمان نمایش دهیم کد CSS آن به صورت زیر است:

حال با استفاده از کدهای html به سراغ کدهای CSS می رویم. سه عنصر span برای این آیکون ها در نظر می گیریم:

در کد html کلاس مورد نظر را به هر عنصر اختصاص می دهیم.

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

برای تغییر سایز و رنگ تنها باید کد های CSS را تغییر بدهیم . مثلا توییتر را فیروزه ای و فیس بوک را آبی می کنیم:

خروجی این کد ها نیز به این صورت است:

همچنین می توانیم در کلاس اصلی تغییرات را انجام دهیم و یا hover برای آیکون ها در نظر بگیرید.

طراحی سایت اینتن : با استفاده از این کد ها یاد گرفتیم طوری فونت ها را به کار بگیریم که موجب افزایش سرعت لود و بهینه تر شدن سایت های ریسپانسیومان بشویم. استفاده از فونت به جای آیکون می تواند برای سئو و بهینه سازی وب سایت در طراحی سایت بسیار مفید باشد . و بهتر است در طراحی سایت از این روش استفاده نمایید.