تفاوت بین فرمت های فونت سایت

تفاوت بین فرمت های فونت در سایت (TTF,OTF, WOFF)

شاید تا کنون متوجه شده باشید که فونت ها دارای فرمت‌های متفاوتی هستند، شاید برای شما جالب باشد که تفاوت بین فرمت های فونت در سایت چیست؟ چه تفاوتی در بین فرمت های مختلف یک فونت وجود دارد و به چه دلیل در سایت خود از یک فونت با چندین فرمت متفاوت استفاده می کنیم. تا پایان این مقاله با ما همراه باشید و با مقدمات و مفاهیم اولیه فونت ها و فرمت های مختلف یک فونت آشنا شوید.

انواع فرمت های فونت

فرمت های زیادی برای فونت ها وجود دارند اما پر استفاده ترین فرمت ها موارد زیر هستند که معمولا در تمامی فونت های استاندارد دریافتی و یا خریداری شده موجود هستند:

  • OTF – OpenType Font
  • TTF – TrueType Font
  • EOT – Embedded Open Type
  • WOFF – Web Open Font Format
  • WOFF2 – Web Open Font Format (Version 2)
  • SVG – Scalable Vector Graphics

پس اگر پس از دریافت یک فونت تمام این فایل ها را دریافت کردید، چه باید کرد؟ باید از کدام فرمت استفاده کنید؟ در ادامه مقاله تفاوت بین فرمت های فونت وب سایت، در خصوص هرکدام از فرمت‌ها توضیح خواهیم داد، اما بهترین کار این است که همیشه از فایل OTF استفاده کنید. اگر این فایل موجود نبود نیز می توانید از فایل TTF استفاده کنید.

تفاوت بین فرمت های فونت در سایت

حال که با پر استفاده ترین فرمت های یک فونت آشنا شدید، با ما همراه باشید تا تفاوت بین فرمت های فونت را بهتر درک کنید.

فرمت TrueType Font (.TTF)

فونت های TrueType از دسته فونت‌هایی هستند که توسط اپل و مایکروسافت ایجاد شده اند، فرمت TTF عملکرد خوبی دارد اما دارای محدودیت هایی نیز هست. به همین دلیل OpenType ایجاد شد.

فرمت OpenType Font (.OTF)

فرمت OpenType فرمت تکامل یافته TrueType است که در سطر بالاتر با آن آشنا شدید، OTF شامل تمامی موارد مورد نیاز از جمله تمام swash ها و جایگزین های اضافی، تمام خطوط چرخشی روی اعداد و حروف مورد نظر برای تایپ می شود.

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

جهت مشاوره و کسب اطلاعات بیشتر از طریق واتساپ با شماره ۰۹۹۹۹۹-۱۵۸-۱۱ در تماس باشید.

پروژه محور - ارتباط مستقیم با مدرس

فرمت Embedded Open Type (.EOT)

اگرچه فونت‌های OpenType بسیار مفید به نظر می‌رسند، فایل فونت EOT برای وب سایت در نظر گرفته شده است. این فرمت توسط مایکروسافت ایجاد شده است و فقط در اینترنت اکسپلور پشتیبانی می شود.

فرمت های Web Open Font Format Font (WOFF/WOFF2)

فایل های WOFF و WOFF2 برای وب ایجاد شده اند و اساساً نسخه فشرده شده فونت های OpenType و TrueType همراه با اطلاعات اضافی هستند. در حالی که فرمت WOFF و WOFF2 تقریبا در همه مرورگرها کار می کنند، در نرم افزارهای گرافیکی مانند Cricut Design Space، Adoble Illustrator، Silhoutte Studio و غیره کار نمی کنند.

فرمت Scalable Vector Graphics (.SVG)

فونت SVG نسخه جدیدی از فرمت OpenType است. فرمت SVG به کاراکترها اجازه می دهد تا در رنگ های مختلف و شفافیت های مختلف نمایش داده شوند و حتی ممکن است برخی از آنها متحرک باشند. این ویژگی ها توسط فرمت های معمولی OTF و TTF پشتیبانی نمی شوند.

فونت های OpenType SVG به عنوان فونت های رنگی نیز شناخته می شوند. یکی از تفاوت های فونت های معمولی و SVG در اندازه فایل است چرا که فایل‌های فونت SVG با اطلاعات بیشتری تعبیه شده‌اند.

آموزش اضافه کردن فونت جدید به سایت

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

خدمات طراحی سایت

طراحی سایت مطابق با استانداردهای روز برنامه‌نویسی، به همراه آموزش استفاده و ۶ ماه پشتیبانی رایگان

6 Comments

متن ساده و قابل درك
بسيار ممنون

مفید بود ممنون. یه سوال ایجاد میشه. وقتی otf بهتره پس چرا در فایل های دانلودی فونت ها، علاوه بر اون، فرمت ttf هم قرار میگیره؟ آیا کاربرد خاصی داره؟

  • سلام، خواهش میکنم،
    اگر یک مرورگر از فرمت پشتیبانی نکنه از فرمت جایگزین استفاده میشه.
    برای مثال برخی از مرورگرها از فرمت های woff و woff2 پشتیبانی نمی کنن.
    به کامنت های کد توجه کنید:

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