نکات طراحی سایت : تفاوت فرمت وب فونت ها

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

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

فرمت ها :

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

 مقایسه :

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

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

 فرمت woff:

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

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

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

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

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