Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

فونت دلخواه من – قسمت اول – ( سرویس فونت گوگل ) Google Font API

در این آموزش ما می خواهیم کار با سرویس نسبتا جدید گوگل به نام Google font API   را  تجربه کنیم .

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

خوب ! اولین سوالی که برای کاربران ایرانی پیش می آید ! آیا فارسی را پشتیبان می کند ؟

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

اما اصولا این سرویس چه کاری انجام می دهد و چگونه ؟

این سرویس برای شما یک کد css  تولید می کند که باید به صفحه مورد نظر اضافه کنید . می توانید از گالری فونت گوگل فونت دلخواه خود را انتخاب کنید . سپس کد خروجی را استفاده نمایید .

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

از کجا شروع کنیم ؟!

۱ – به اینجا مراجعه کنید . ( صفحه اصلی سرویس فونت گوگل )

font gallery

مثل تمام پروژه های دیگر گوگل این سرویس دارای راهنما و مثال های فراوان است .

۲ – اگر مایلید وارد گالری فونت شوید  ( visit the Google Font Directory )  ویا یک مثال ساده را مشاهده کنید  ( quick start example )     ما  وارد گالری فونت می شویم.

۳ -  فونت دلخواه خود را انتخاب کنید .

font gallery

۴ -  بعد از انتخاب ( کلیک ) فونت مورد نظر وارد  font preview می شوید  .

font preview

۴ – تنظیمات مورد نظر را اعمال کنید .   همان طور که  مشاهده می فرمایید می توان نوع فونت , اندازه , استایل , سایه , کوچک یا بزرک بورن حروف , …. تنظیم کرد .  هر تغییری که اعمال کنید  نتیجه در سمت راست نمایش داده می شود و کد خروجی هم به تناسب تغییر می کند . می توانید متنی که می خواهید تایپ کنید . مثال :

۵ – کدهای css  موجود در باکس پایین سمت راست را کپی کنید و آن را در صفحه قبل از <head/>  قرار دهید . ( می توانید سلکتور css  را به دلخواه تغییر دهید.

۶ – نتیجه را مشاهده کنید .

حالا می رسیم به چگونگی کار این سرویس  :

در واقع باید گفت کار خاصی  انجام نمی دهد ! این سرویس از خصوصیت  font-face@  در css  استفاده می کند . از طریق این دستور شما می توانید فونت دلخواه خود را تعریف و فایل آن را به مرورگر بدهید . این سرویس برای روی  تمام مرورگر ها کامل  پشتیبانی می شود  ( حتی IE6 ! )   فایرفاکس ۳٫۶ + و اپرا ۱۰+ و انترنت اکسپلورر ۶+.

اما چرا بهتر است از این سرویس استفاده کنیم ؟

جواب : چون این فونت ها بروی سرور های گوگل میزبانی می شوند و بدیهی است که از نظر سرعت لود قابل مقایسه نیست . مورد دوم کش شدن این فونت ها در کش سرور هاست و باعث سرعت هرجه بیشتر می شود .

اما چطور از font-face@  استفاده کنیم ؟!  (  جواب این سوال را در قسنت بعدی آموزش خواهم داد )

قدم بعدی چیست ؟

کمی با سرویس فونت گوگل کار کنید تا با پارامتر های تایپوگرافی بیشتر آشنا بشوید .

منتظر قسمت بعدی آموزش باشید .


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36624
افراد آنلاین : 4
بازدید امروز : 674
بازدید دیروز : 928
گوگل امروز : 32
گوگل دیروز : 143
بازدید هفته : 5,842
بازدید ماه : 19,162
بازدید سال : 404,785
بازدید کلی : 10,799,261