font-face

چگونه فونت دلخواه خود را داشته باشیم؟

 

 

همیشه انتخاب فونت از مواردی بوده که مدیرهای سایت ها و طراحان اون رو بزحمت انداخته!  فونت عامل تعیین کننده ای در زیبایی سایت هست و همچنین نشون دهنده شخصیت اون سایته!  حالا با سرچ ساده ای در گوگل و گشت و گذاری در سیات های فارسی می فهمیم که فونت های زیبا و متنوعی در صفحات وب بوجود اومده که هر کدوم از اونها نشان دهنده سطح و شخصیت سایت هست!

اما این فونت های متنوع از کجا اومده؟ بهتون می گم با ورود css3 قابلیتی بنام @font-face بوجود اومد که بوسیله اون می شه هر فونتی رو توی صفحه وبتون نمایش بدید! اما چطور ؟ با هم می بینیم!

ساختار اصلی @font-faceبصورت زیر هست!

  1. @font-face {
  2. font-family‘B yekan’;
  3.  url(‘http://ifont.ir/eot/BYekan.eot?#’format(‘eot’),
  4.  url(data:application/octet-stream;base64,) format(‘woff’),
  5.  url(‘http://ifont.ir/svg/byekan.svg’format(‘svg’);
  6. font-weight:normal;
  7. }

font-family در @font-face اسم فونت مورد نظر شما هست که می تونید بطور دلخواه هر اسمی که می خواهید بگذارید روش!

در خطوط پایین تر شما فرمت می بینید و آدرس خود فونت که محل لود شدن اون قرار دادشده! اما منظور از فرمت چیه؟

فرمت استاندارد فرمت ttf هست و به زودی تمامی مرورگر ها از این فرمت پشتیبانی می کنن اما فرمت های اصلی عبارتند از گوگل کروم : ttf و SVG و  فایرفاکس : otf و ttf  و اپرا و سافاری : ttf , otf و SVG و اینترنت اکسپلورر : eot

خب! اما حالا ما یه فونت داریم چطوری اینها رو به این فرمت ها در بیام و لود کنیم؟ کافیه که به سایت  @font-face Kit Generator برید و فونت خودتون رو آپلود کنید و فایلی با این فرمت ها رو دریافت کتید! به همین سادگی!

خوب حالا چطور از این @font-face استفاده کنیم؟ کافیه که هرجا می خواهید این فونت اعمال بشه خصوصیت

 font-family: ‘B yekan’;

رو بنویسید!

امیدوارم این آموزش براتون مفید باشه و نحوه استفاده از این خصوصیت خوب  css رو فراگرفته باشید!

چگونه فونت دلخواه خود را داشته باشیم؟

 

0 پاسخ

دیدگاه خود را ثبت کنید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *