اگر شما هم توسئه دهنده و یا طراح وب هستید بارها براتون پیش اومده که قصد داشتید تا یک فونت رو برای وب مورد نظرتون انتخاب کنید . اما در نوشتن کد ها چرا از فرمت eot / ttf / svg / woff / woff2 استفاده می کنید ؟ با ما همراه باشید تا با تفاوت های این فرمت ها بیشتر آشنا شوید .

 

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

چرا با یک تکه کد CSS شروع کردیم ؟ تا حالا برای اضافه کردن فونت یکان چند بار از کد بالا استفاده کردین و یا کد موجود در قالب به چشمتون خورده ؟ آیا واقعا میدونید چرا از فرمت های موجود وب فونت استفاده می کنید ؟ آیا می تونید فقط از یک فرمت یا بهتره بگم از بهترین فرمت استفاده کنیم ؟ پس در مرحله اول بریم به سراغ تعریف پسوند فونت ها و کاربرد اونها …

 

woff-format

 

فرمت ها :

  • پسوند eot : این فرمت را مایکروسافت برای استفاده در وب سایت معرفی کرد اما استفاده از آن تنها برای مرورگر اینترنت اکسپلورر میسر می باشد .
  • پسوند ttf : این فرمت را اپل در اواخر دهه ۸۰ میلادی برای استفاده در PostScript توسعه داد و از اون زمان به عنوان فرمت استاندارد فونت‌ها شناخته شده است . بیشتر مرورگرها از این فرمت پشتیبانی می‌کنند غیر از اینترنت اکسپلورر.
  • پسوند svg : این فرمت بر اساس فرمت SVG (تصاویر مقایس‌پذیر) ساخته شده و سافاری در سیستم عامل iOS قبل از نسخه ۵ فقط از این نوع فونت پشتیبانی می‌کرد. در کل پشتیبانی مرورگرها از این فرمت خوب نیست و برای فارسی هم قابل استفاده نیست.
  • پسوند woff : این فرمت را موزیلا در سال ۲۰۰۹ برای استفاده در وب توسعه داد و حالا کنسرسیوم وب اون رو به رسمیت می‌شناسه. این فرمت رو بیشتر مرورگرهای مدرن و اینترنت اکسپلورر ۹ به بعد پشتیبانی می‌کنند.
  • پسوند woff2 : این فرمت نسل بعد از WOFF است که توسط mozilla ارائه شده است  . همچنین به دلیل فشرده سازی بهتر باعث میشود تا کار لود کردن فونت خیلی سریع تر انجام شود که در نهایت لود سریع تر وبسایت را بدنبال خواهد داشت .

 

مقایسه :

خب همون طور که دیدیم پسوند eot که فقط برای اینترنت اکسپلورر هست ! پسوند ttf هم که اینترنت اکسپلورر پشتیبانی نمیکنه و پسوند svg هم که کلا با فارسی مشکل داره ! خب اینجاست که موزیلا قدم بر میداره و فرمت woff رو معرفی میکنه . پس بدون هیچ مشکلی شما می تونید از این فرمت و جالبه که به تنهایی ! از اون استفاده کنید .

حالا وقتشه که بریم یه مقدار بیشتر از فرمت woff سر در بیاریم …

 

فرمت woff:

گلیف‌های تایپ‌فیس در فرمت woff مثل بقیه فرمت‌ها (غیر از SVG) در جدول sfnt ذخیره می‌شن با این دو ویژگی:

 

  • جدول اطلاعات گلیف توی فرمت woff به صورت فشرده ذخیره می‌شه در نتیجه حجم فایل فونت خیلی پایین میاد. مثلا، قلم میترا سری بی، با فرمت ttf حدود ۶۰ کیلوبایت هست ولی فرمت woff همین قلم بدون افت کیفیت ۳۴ کیلوبایته. این موضوع برای استفاده در وب (برای سریع‌تر و سبک‌تر لود شدن صفحات) خیلی مهمه.

 

  • در ساختار فایل فونت woff امکان تعریف گلیف‌های خصوصی (private-use) و تعریف اطلاعات metadata و اجازه‌نامه وجود داره. برای همین خیلی از سازنده‌های فونت که نمی‌خوان اجازه استفاده از فرمت‌های ttf/otf ـشون رو در وب بدن، از woff استفاده می‌کنن.

 

با این توضیحات، اگر اینترنت اکسپلورر ۸ و پایین‌تر، مرورگر پیش‌فرض اندروید نسخه ۴.۳ و پایین‌تر و اپرا مینی براتون اهمیت نداره (که پیشنهاد می‌کنم نداشته باشه)، می‌تونید برای تعریف وب‌فونت در کارتون، فقط از فرمت woff استفاده کنید :

 

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

 

اگر هم مرورگر پیش‌فرض اندروید ۴.۳ و پایین‌تر براتون اهمیت داره می‌تونید فرمت ttf رو هم نگه‌دارید ولی خب پیشنهاد نمی‌کنم. اینطوری هم کدتون ساده‌تر می‌شه هم می‌تونید از وب‌فونت‌های با کیفیت در پروژه‌هاتون استفاده کنید و نگران فرمت‌های مختلف نباشید.

 

فرمت woff2:

این وب فونت نسل جدید فرمت woff می باشد که نسبت به ورژن قبلی خود بین ۳۰ تا ۵۰ درصد سرعت بیشتری در لود دارد .

 

نمونه کد CSS برای فرمت woff2 :

 

@font-face {
 font-family: 'Yekan';
 src: url('yekan.woff2') format('woff2');
}

 

  • فرمت woff2 برای مرورگر های Chrome 36 و Opera 23 و Edge 14  و Firefox 35 و Safari 10 به بالا ارائه شده است .

 

در صورت وجود هرگونه ابهام و یا سوال در قسمت دیدگاه های همین مطلب از ما پشتیبانی رایگان بگیرید .