اگر شما هم توسئه دهنده و یا طراح وب هستید بارها براتون پیش اومده که قصد داشتید تا یک فونت رو برای وب مورد نظرتون انتخاب کنید . اما در نوشتن کد ها چرا از فرمت 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 شروع کردیم ؟ تا حالا برای اضافه کردن فونت یکان چند بار از کد بالا استفاده کردین و یا کد موجود در قالب به چشمتون خورده ؟ آیا واقعا میدونید چرا از فرمت های موجود وب فونت استفاده می کنید ؟ آیا می تونید فقط از یک فرمت یا بهتره بگم از بهترین فرمت استفاده کنیم ؟ پس در مرحله اول بریم به سراغ تعریف پسوند فونت ها و کاربرد اونها …
فرمت ها :
- پسوند 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 به بالا ارائه شده است .
در صورت وجود هرگونه ابهام و یا سوال در قسمت دیدگاه های همین مطلب از ما پشتیبانی رایگان بگیرید .
پس فقط woff رو نگهداریم به نظر کافیه
سلام دوست عزیز
بله همونطور که در مطلب گفته شد، بیشتر مرورگرهای مدرن و اینترنت اکسپلورر ۹ به بعد از فرمت woff پشتیبانی میکنن و الان به فرمت استاندارد وب تبدیل شده. اما معمولا برای محکم کاری فرمت eot هم قرار داده میشه تا مرورگر های IE6, 7, 8 هم پشتیبانی بشن. البته تعداد کاربران این نسخه از مروگر ها بسیار بسیار کم هست.
آیا برنامه مطمئنی برای تبدیل فونتها به فرمتهای مختلف وجود داره ؟
ضمن عرض سلام و درود
رایان عزیز ; شما میتونید با کمک وبسایت زیر فونت عادی ویندوز (TTF) را به فرمت های وب تبدیل نمایید .
Link : web font generator
با کمال احترام و سپاس
دمتون گرم – مطلب خوبی بود – من از فرمت eot استفاده میکردم بعد میدیم تو اپرا جواب نمیداد – رفتم سراغ فرمت اصلی که بیشتر تو چشم بود یعنیttf و جواب داد – بعد اومدم ببینم تفاوت این دو چیه که دیدم یه فرمت خیلی خوب به نام woff هستش – دمتون گرم جدا – مطلب خوبی بود.
فونت chunkfive – حجم بر اندازه کیلوبایت:
woff : 12
ttf : 18
eot : 19
svg : 23
از نظر حجم هم این فرمت عالی هستش.
ضمن عرض سلام و درود
@مهدی عزیز ; از همراهی شما دوست عزیز سپاسگذاریم
با کمال احترام و سپاس
تشکر
عالی بود
از همراهی شما دوست عزیز سپاسگذاریم
سلام خسته نباشید و ممنون از پست مفیدتون
اما کاش در مورد woff2 هم می گفتید این اصلا چست لازمه ؟ نیست ؟ خاصیت و عملکردش چیه ؟
ممنون میشم در این خصوص هم بفرمایید من واقعا کنجکاو شدم این woff2 چی هست ایا میشه از شرش خلاص شد یا مهمه بودنش . مرسی و خسته نباشید
ضمن عرض سلام و درود
این مطلب بنا به درخواست شما کاربر محترم بروزرسانی گردید و فرمت wolff2 نیز به آن افزوده گردید .
WOFF2 is a font format that provides, on average, a 30% reduction in file size, thus helping Web fonts load more quickly in compatible browsers.
WOFF2 fonts are automatically included when publishing new Fonts.com Web Fonts projects. Existing projects need to be republished to take advantage of the WOFF2 format.
با کمال احترام و سپاس
سلام عزیز مرسی از پاسخگو بودن و اینکه اهمیت دادید و مقالتون رو تکمیل کردید
چیزی که من شخصا متوجه شدم درست یا اشتباه . فرمت woff2 بهتر هست اما چون همه مرورگرا مخصوصا قدیمی ساپورت نمیکنن نمیتونه کامل جایگزین بقیه فونتها بشه درسته ؟
این فونتها هم شدن بلای جون ما
من شخصا همه فرمتهای فونت رو ضمیمه کردم کاش میشد با خیال راحت همه رو حذف کرد و فقط یکی گذاشت برای همه . مرسی از مطلب مفیدتون . و سپاس بخاطر پاسخگو بودنتون . موفق و پیروز باشید
سلام
بنده قالبی خریداری کردم خواستم فایل های سی اس اس و جی اس و… رو هاست شخصی خودم آپلود کنم اما مشکل اینه که تنها با آپلود کردن فایل ها کار درست پیش نمیره و قالب به هم میریزه مثلا فایل webfont.css رو آپلود کردم جایگزین کردم تو قالب به هم ریخت و درست نشون نداد مشکل از کجا میتونه باشه؟
با سلام
قالب شما وردپرس هست و یا HTML ؟
نحوه آدرس دهی فایل ها در وردپرس کمی متفاوت هست و با load نشدن فایل ها، قالب شما بهم میریزه.
با استفاده از function زیر در وردپرس قبل از نام فایلها، مشکل آدرس دهی حل خواهد شد :
پس از مدت ها روشن شدم