در این آموزش ما می خواهیم کار با سرویس نسبتا جدید گوگل به نام Google font API را تجربه کنیم .
اگر طراح وب باشید حتما از محدودیت استفاده از فونت ( مخصوصا فارسی ) خسته شده اید . می خواهیم با هم تایپوگرافی آنلاین را کمی پر و بال دهیم .این سرویس را در یک جمله می توان آسان کننده استفاده از فونت دلخواه در وب دانست . :
خوب ! اولین سوالی که برای کاربران ایرانی پیش می آید ! آیا فارسی را پشتیبان می کند ؟
جواب : فعلا خیر اما در آینده نزدیک گوگل قول اضافه کردن فونت های دیگر زبان ها را داده است .اما ما راه دیگری را برای استفاده از فونت های فارسی دلخواه در وب را امتحان خواهیم کرد که در قسنت دوم این آموزش به آن خواهیم پرداخت.
اما اصولا این سرویس چه کاری انجام می دهد و چگونه ؟
این سرویس برای شما یک کد css تولید می کند که باید به صفحه مورد نظر اضافه کنید . می توانید از گالری فونت گوگل فونت دلخواه خود را انتخاب کنید . سپس کد خروجی را استفاده نمایید .
نکته : طبق معمول ایران تحریم می باشد ! . برای دیدن آموزش ها و راهنماهای گوگل کد باید از … استفاده نمایید. فقط برای همین قسمت . برای نمایش در صفحه و نتیجه کار و دیدن گالری فونت نیازی به … نیست .
از کجا شروع کنیم ؟!
۱ – به اینجا مراجعه کنید . ( صفحه اصلی سرویس فونت گوگل )
۲ – اگر مایلید وارد گالری فونت شوید ( visit the Google Font Directory ) ویا یک مثال ساده را مشاهده کنید ( quick start example ) ما وارد گالری فونت می شویم.
۳ - فونت دلخواه خود را انتخاب کنید .
۴ - بعد از انتخاب ( کلیک ) فونت مورد نظر وارد font preview می شوید .
۴ – تنظیمات مورد نظر را اعمال کنید . همان طور که مشاهده می فرمایید می توان نوع فونت , اندازه , استایل , سایه , کوچک یا بزرک بورن حروف , …. تنظیم کرد . هر تغییری که اعمال کنید نتیجه در سمت راست نمایش داده می شود و کد خروجی هم به تناسب تغییر می کند . می توانید متنی که می خواهید تایپ کنید . مثال :
۵ – کدهای css موجود در باکس پایین سمت راست را کپی کنید و آن را در صفحه قبل از <head/> قرار دهید . ( می توانید سلکتور css را به دلخواه تغییر دهید.
۶ – نتیجه را مشاهده کنید .
حالا می رسیم به چگونگی کار این سرویس :
در واقع باید گفت کار خاصی انجام نمی دهد ! این سرویس از خصوصیت font-face@ در css استفاده می کند . از طریق این دستور شما می توانید فونت دلخواه خود را تعریف و فایل آن را به مرورگر بدهید . این سرویس برای روی تمام مرورگر ها کامل پشتیبانی می شود ( حتی IE6 ! ) فایرفاکس ۳٫۶ + و اپرا ۱۰+ و انترنت اکسپلورر ۶+.
اما چرا بهتر است از این سرویس استفاده کنیم ؟
جواب : چون این فونت ها بروی سرور های گوگل میزبانی می شوند و بدیهی است که از نظر سرعت لود قابل مقایسه نیست . مورد دوم کش شدن این فونت ها در کش سرور هاست و باعث سرعت هرجه بیشتر می شود .
اما چطور از font-face@ استفاده کنیم ؟! ( جواب این سوال را در قسنت بعدی آموزش خواهم داد )
قدم بعدی چیست ؟
کمی با سرویس فونت گوگل کار کنید تا با پارامتر های تایپوگرافی بیشتر آشنا بشوید .
منتظر قسمت بعدی آموزش باشید .
