نمایش خبر

image

پیوست فونت ها به صفحات وب

در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد دستور @font-faceدر سی اس اس صحبت خواهیم کرد.

یکی مشکلاتی که همواره طراحان وب با آن درگیر بودند بحث فونت های در صفحات وب بود.به عنوان مثال فرض کنید شما به عنوان یک سایتی را ایجاد کرده اید،و از فونت بی یکان در سایت خود استفاده کرده اید،اما زمانی که کاربر قصد مشاهده صفحه شما را دارد باید حتما این فونت در سیستم کاربر نصب باشد تا بتواند سایت شما را به درستی مشاهده کند اما اگر فونت مدنظر در سیستم کاربر نصب نباشد چه اتفاقی می افتد ؟ طبیعتا مرورگر فونت مربوطه را نمی شناسد و در این حالت اگر از فونت های generic استفاده کرده باشید،مرورگر یکی از این فونت ها را اعمال خواهد کرد و اگر از فونت های generic استفاه نکرده باشید،مرورگر فونت پیش فرض خود را اعمال خواهد کرد.در هر دو صورت کاربر سایت شما را به درستی و به همان صورتی که مدنظر شما بوده مشاهده نخواهد کرد علاوه بر این،عدم شناخت فونتی که شما در صفحه استفاده کرده اید می تواند موجب ایجاد مشکلاتی جانبی دیگری از جمله بهم ریختگی صفحه نیز شود.

اضافه شدن دستور @font-face این مشکل را حل کرد و با استفاده از این دستور می توان فونت سفارشی خود را تعریف کرد تا در صفحه مورد استفاده قرار گیرد.این کار باعث می شود تا از فونت های دیگری علاوه بر فونت های نصب شده بر روی سیستم کاربر بتوان بهره برد.

شکل کلی استفاده از این دستور به صورت زیر می باشد :

@font-face { 
/* کدهای مربوط به تعریف فونت مدنظر */
 }

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

@font-face {
 font-family: 'b yekan'; 
src: url('byekan.woff') format('woff');
 }

در ادامه به بررسی پراپرتی هایی که داخل بلاک @font-face می توان استفاده کرد می پردازیم.

font-family

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

@font-face {
 font-family: 'myFont';
 src: url('Mojagha.woff?') format('woff'); 
}
p{
	Font-family: myFont;
}

Src

این کلمه مخفف source می باشد و تعیین کننده منبع فونتی است که می خواهیم به صفحه اضافه کنیم. این آدرس می تواند یک آدرس محلی بر روی سیستم خودمان باشد و یا آدرس سروری که فونت را نگهداری می کند باشد.

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

@font-face {
 font-family: 'byekan'; 
src: url('Byekan.eot?') format('eot'); 
url('Byekan.woff') format('woff'),
 url('Byekan.ttf') format('truetype'); 
}

تعریف استایل ها و وزن های مختلف

اگر فونت مورد نظر دارای فایل استایل متفاوت و همینطور وزن های مختلف است و می خواهیم به تمام این موارد دسترسی داشته باشیم می توانیم از پراپرتی های font-style , font-weight استفاده کنیم.

@font-face {
  font-family:'b yekan';
  font-style: normal;
  font-weight: 400;
  src:url('Byekan.woff?') format('woff'),
	  url('Byekan.ttf') format('truetype');
}

@font-face {
  font-family:'b yekan';
  font-style: normal;
  font-weight: 700;
  src:url('ByekanBold.woff?') format('woff'),
	  url('ByekanBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src:url('ByekanItalic.woff?') format('woff'),
	  url('ByekanItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src:url('ByekanBoldItalic.woff?') format('woff'),
	  url('ByekanBoldItalic.ttf') format('truetype');;
}

حال می توانیم از هرکدام از این فونت ها استفاده کنیم.

h1 {
  font: 700 italic 'b yekan', sans-serif;
}

h2 {
  font: 700 normal 'b yekan', sans-serif;
}

h3 {
  font: normal normal 'b yekan', sans-serif;
}
نکته : تا زمانی که از یک حالت خاص استفاده نشود مرورگر دستور مورد نظر را اجرا و فایل مربوطه را دانلود نمی کند.

تابع local

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

با استفاده از تابع local می توانیم فونت موردنظر را از سیستم کاربر فراخوانی کرد، حال اگر چندین فونت مدنظر ما باشد می توانیم نام های مختلف را پشت سر هم امتحان کنیم. در نهایت اگر مرورگر قادر به پیدا کردن فونت بر اساس هیچ یک از نام ها نباشد فونت مورد نظر را از آدرسی که توسط تابع url مشخص شده است دانلود می کند.

src: local("b yekan"), url("font/byekan.woff") format("woff");

فرمت های مختلف فونت

مرورگرهای مختلف فرمت های مختلفی را پشتیبانی می کنند،بنابراین چنانچه می خواهید فونت مدنظر شما در تمام مرورگرها به درستی نمایش داده شود باید از فرمت های مختلفی استفاده کنید.به طور کلی چهار فرمت اصلی فونت وجود دارد:

(Web Open Font Format) WOFF

این فرمت توسط موزیلا طراحی شد تا داده های فونت را سبک تر و راحت تر فشرده سازی کند و در نتیجه برای وب مفیدتر باشد. تمام فونت های نوع OTF , TTF قابلیت تبدیل شدن به فرمت WOFF را دارند. همینطور در این فرمت طراح فونت می تواند لایسنس مربوطه را در خود فایل قرار دهد. این فرمت به نظر می رسد بهترین فرمت برای استفاده باشد و تمام مرورگرها به سمت این فرمت در حال حرکت هستند.

پشتبیانی مرورگرها از این فرمت را مشاهده می کنید:

اما فرمت woff2 نیز اخیرا معرفی شده است که فشرده سازی قویتری دارد،در نتیجه حجم فونت کم تر شده و سریع تر می باشد.

پشتبیانی مرورگرها از فرمت woff2 را مشاهده می کنید:

(Embedded Open Type) EOT

این فرمت تنها فرمتی است که توسط IE8 و پایین تر پشتیبانی می شود و بقیه مرورگرها از این فرمت پشتیبانی نمی کنند در نتیجه زمانی که از این فونت در دستور @font-face استفاده می کنید فقط مرورگرهای IE8 و پایین تر از ان استفاده می کنند.این فونت توسط شرکت مایکروسافت طراحی شده است.پشتیبانی مرورگرها از این فرمت را مشاهده می کنید:

(OpenType Font/TrueType Font) OTF/TTF

فرمت OpenType یک فرمت cross-platform می باشد که ویژگی های زیادی برای کنترل تایپوگرافی دارد OTF از TTF جدیدتر است و ویژگی های بیشتری دارد.

این دو فرمت به راحتی می توانند به صورت قانونی کپی شوند به همین دلیل WOFF از این فرمت کپی شده است تا کارایی این فرمت را بهبود ببخشد.

نکته : منظور از cross-platform این است که این فونت قابل اجرا بر روی دستگاه ها و سیستم عامل های مختلف می باشد.

پشتیبانی مرورگرها از این فرمت را مشاهده می کنید:

(Scalable Vector Graphics) SVG/SVGZ

فرمت SVG فرمت SVG فونت را بصورت وکتور یا همان برداری بازسازی می کند که این امر باعث می شود تا حجم فایل کمتر باشد و همینطور کارایی بهتری در دستگاههای موبایل داشته باشیم. این فرمت تنها فرمتی است که سافاری روی iOS 4.1 و پایین تر پشتیبانی می کنند.

SVGZ همان SVG از نوع ZIP می باشد.

پشتیبانی مرورگرها از این فرمت را مشاهده می کنید:

چگونه بیشترین پشتیبانی در مرورگرها را داشته باشیم

اگر می خواهید فونت شما بیشترین پشتیبانی را داشته باشد و تقریبا در تمام مرورگرها پشتیبانی شود باید دستور @font-face خود را مشابه کد زیر بنویسید:

@font-face {
  font-family: 'byekan';
  src: url('byekan.eot'); /* IE9 Compat Modes */
  src: url('byekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('byekan.woff2') format('woff2'), /* Super Modern Browsers */
       url('byekan.woff') format('woff'), /* Pretty Modern Browsers */
       url('byekan.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('byekan.svg#svgFontName') format('svg'); /* Old iOS */
}

اما اگر مرورگرهای قدیمی چندان برای شما مهم نیستند می توانید فقط از فرمت WOFF استفاده کنید مانند مثال زیر:

@font-face {
  font-family: 'byekan';
  src:  url('byekan.woff2') format('woff2'),
        url('byekan.woff') format('woff');
}

اما توصیه می شود همیشه فرمت TTF را در دستور @font-face خود داشته باشید.مانند مثال زیر:

@font-face {
  font-family: 'byekan';
  src: url('byekan.woff2') format('woff2'),
       url('byekan.woff') format('woff'),
       url('byekan.ttf') format('truetype');
}

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.