نقطه ویرگول;

هر از گاهی از هر چیزی

هر از گاهی از هر چیزی

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

پنجشنبه, ۱۱ فروردين ۱۳۹۰، ۰۳:۵۰ ب.ظ
در این آموزش ما می خواهیم کار با سرویس نسبتا جدید گوگل به نام Google font API   را  تجربه کنیم .
اگر طراح وب باشید حتما از محدودیت استفاده از فونت ( مخصوصا فارسی ) خسته شده اید . می خواهیم با هم تایپوگرافی آنلاین را کمی پر و بال دهیم .این سرویس را در یک جمله می توان آسان کننده استفاده از فونت دلخواه در وب دانست . : خوب ! اولین سوالی که برای کاربران ایرانی پیش می آید ! آیا فارسی را پشتیبان می کند ؟
جواب : فعلا خیر اما در آینده نزدیک گوگل قول اضافه کردن فونت های دیگر زبان ها را داده است .اما ما راه دیگری را برای استفاده از فونت های فارسی دلخواه در وب را امتحان خواهیم کرد  که در قسنت دوم  این آموزش به آن خواهیم پرداخت.
اما اصولا این سرویس چه کاری انجام می دهد و چگونه ؟
این سرویس برای شما یک کد css  تولید می کند که باید به صفحه مورد نظر اضافه کنید . می توانید از گالری فونت گوگل فونت دلخواه خود را انتخاب کنید . سپس کد خروجی را استفاده نمایید .
نکته : طبق معمول ایران تحریم می باشد ! . برای دیدن آموزش ها و راهنماهای گوگل  کد   باید از ... استفاده نمایید.  فقط برای همین قسمت . برای نمایش در صفحه و نتیجه کار و دیدن گالری فونت  نیازی به ... نیست .
از کجا شروع کنیم ؟!
1 - به اینجا مراجعه کنید . ( صفحه اصلی سرویس فونت گوگل )
مثل تمام پروژه های دیگر گوگل این سرویس دارای راهنما و مثال های فراوان است .
2 - اگر مایلید وارد گالری فونت شوید  ( visit the Google Font Directory )  ویا یک مثال ساده را مشاهده کنید  ( quick start example )     ما  وارد گالری فونت می شویم.
3 -  فونت دلخواه خود را انتخاب کنید .
4 -  بعد از انتخاب ( کلیک ) فونت مورد نظر وارد  font preview می شوید  .
4 - تنظیمات مورد نظر را اعمال کنید .   همان طور که  مشاهده می فرمایید می توان نوع فونت , اندازه , استایل , سایه , کوچک یا بزرک بورن حروف , .... تنظیم کرد .  هر تغییری که اعمال کنید  نتیجه در سمت راست نمایش داده می شود و کد خروجی هم به تناسب تغییر می کند . می توانید متنی که می خواهید تایپ کنید . مثال :
5 - کدهای css  موجود در باکس پایین سمت راست را کپی کنید و آن را در صفحه قبل از
  قرار دهید . ( می توانید سلکتور css  را به دلخواه تغییر دهید.
6 - نتیجه را مشاهده کنید .
حالا می رسیم به چگونگی کار این سرویس  :
در واقع باید گفت کار خاصی  انجام نمی دهد ! این سرویس از خصوصیت  font-face@  در css  استفاده می کند . از طریق این دستور شما می توانید فونت دلخواه خود را تعریف و فایل آن را به مرورگر بدهید . این سرویس برای روی  تمام مرورگر ها کامل  پشتیبانی می شود  ( حتی IE6 ! )   فایرفاکس 3.6 + و اپرا 10+ و انترنت اکسپلورر 6+.
اما چرا بهتر است از این سرویس استفاده کنیم ؟
جواب : چون این فونت ها بروی سرور های گوگل میزبانی می شوند و بدیهی است که از نظر سرعت لود قابل مقایسه نیست . مورد دوم کش شدن این فونت ها در کش سرور هاست و باعث سرعت هرجه بیشتر می شود .
اما چطور از font-face@  استفاده کنیم ؟!  (  جواب این سوال را در قسنت بعدی آموزش خواهم داد )
قدم بعدی چیست ؟
کمی با سرویس فونت گوگل کار کنید تا با پارامتر های تایپوگرافی بیشتر آشنا بشوید .
منتظر قسمت بعدی آموزش باشید .
موافقین ۰ مخالفین ۰ ۹۰/۰۱/۱۱
مرتضی فتحی

google

typography

font

design

api

css

نظرات  (۱۰)

سلام داوود جان ممنون جالب بود
مطلب جالبی بود !
خیلی سرویس خوبی هستش. با همت دوستان ایشالا فارسیش رو راه بندازیم
ممنونم . در قسمت دوم جلب تر هم خواهد شد.
خیلی خوب بود
ممنون
سلام دوست گلم چون دیدم شما در کدنویسی و ... استادید گفتم این موضوع رو باهاتون مطرح کنم شاید بتونید کمک کنید
http://forum.wp-persian.com/topic/11890
ممنونم ازتون
سلام
این API هم شبیه به همون سایت typekit عمل میکنه؟
دست گوگل درد نکنه پیش دستی کرد قبل از اینکه مستولان پیلطرینک اون رو بر ضد آرمانهای ما بدانند و مسعودش کنن خود گوگل با یخ و ترشی گفت برید پی کارتون!
403. That’s an error.
Your client does not have permission to get URL /apis/webfonts/ from this server. That’s all we know.
مرسی خیلی خوب بود
دومین فونت استاندارد یونیکد توسط شورای عالی اطلاع رسانی بنام فونت " نیریزی " ساخته شد . با تهیه فونت فارسی‌نویس نیریزی، به‌عنوان خط قرآنی-ایرانی، امکان دانلود این فونت از وبگاه شورای عالی اطلاع‌رسانی فراهم شد. به‌گزارش واحد ارتباطات دبیرخانه شورای عالی اطلاع‌رسانی، هم‌اکنون پس از تهیه نسخه اولیه فونت نیریزی توسط مجری قرارداد، این شورا اقدام به انتشار فونت مذکور جهت استفاده و اظهارنظر کاربران کرده است. بر این اساس از کاربران، کارشناسان، صاحب‌نظران و استادان متخصص درخواست شده تا نظرات، انتقادات و پیشنهادهای خویش را پس از نصب و استفاده از این فونت به کارگروه خط و زبان فارسی به نشانی farsi@scict.ir ارسال کنند. گفتنی است چندی قبل نیز با تهیه فونت نستعلیق، امکان دانلود رایگان این فونت از همین وبگاه فراهم شده بود که با استقبال خوب کاربران مواجه شد.

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی