اگر توسعه‌دهنده/طراح وب باشید، به احتمال خیلی زیاد از وب‌فونت‌ها استفاده کردید. مثلا نمونه زیر:

@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'), /* Modern Browsers */
       url('yekan.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('yekan.svg#svgFontName') format('svg'); /* Legacy iOS */
}

می‌دونید که کد بالا، فونت یکان رو (مثلا) به CSS اضافه می‌کنه و می‌تونید ازش استفاده کنید. اما موضوعی که هست اینه که شاید براتون مهم نباشه که هرکدوم از این فونت‌هایی که با فرمت‌های مختلف توی کد بالا مشخص شدن چی هستن و چه کار می‌کنن و برای همین کل کد رو همینطوری استفاده می‌کنید و فونت‌های مرتبط رو هم آپلود می‌کنید روی سرور. بذارید یه توضیح کوتاه در مورد هرکدوم از این فرمت‌ها بدم:

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

فرمت woff:

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

  1. جدول اطلاعات گلیف توی فرمت woff به صورت فشرده ذخیره می‌شه در نتیجه حجم فایل فونت خیلی پایین میاد. مثلا، قلم میترا سری بی، با فرمت ttf حدود ۶۰ کیلوبایت هست ولی فرمت woff همین قلم بدون افت کیفیت ۳۴ کیلوبایته. این موضوع برای استفاده در وب (برای سریع‌تر و سبک‌تر لود شدن صفحات) خیلی مهمه.
  2. در ساختار فایل فونت woff امکان تعریف گلیف‌های خصوصی (private-use) و تعریف اطلاعات metadata و اجازه‌نامه وجود داره. برای همین خیلی از سازنده‌های فونت که نمی‌خوان اجازه استفاده از فرمت‌های ttf/otf ـشون رو در وب بدن، از woff استفاده می‌کنن. با این توضیحات، اگر اینترنت اکسپلورر ۸ و پایین‌تر، مرورگر پیش‌فرض اندروید نسخه ۴.۳ و پایین‌تر و اپرا مینی براتون اهمیت نداره (که پیشنهاد می‌کنم نداشته باشه)، می‌تونید برای تعریف وب‌فونت در کارتون، فقط از فرمت woff استفاده کنید:
@font-face {
  font-family: 'Yekan';
  src: url('yekan.woff') format('woff');
}

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

این نکته رو هم عرض کنم که صالح سوزنچی عزیز داره فونت‌های فارسی رو برای استفاده در وب بهینه‌سازی می‌کنه (بالاخره تونسته مشکل رندرشون در کروم ویندوز رو حل کنه) و برای این بهینه‌سازی‌ها و حل مشکلات از فرمت woff استفاده کرده. من از فونت‌هاش استفاده کردم و خیلی با کیفیتن. اخبار مربوط بهش رو می‌تونید در صفحه خانه فونت که صالح راه‌اندازی کرده دنبال کنید.

موفق باشید.


منتشر شده در: آموزش ،  تایپوگرافی