WOFF Web Open Format Format

استفاده از فونت های سفارشی در صفحات وب

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

امروزه متخصصان وب دارای فونت های جدیدی هستند و گزینه هایی برای کار با آنها وجود دارد، یکی از آنها فرمت WOFF است.

WOFF چیست؟

WOFF یک مخفف است که به معنای «قالب فونت باز وب» است. برای فشرده سازی برای استفاده با ویژگی CSS @ font-face مورد استفاده قرار می گیرد. این یک راه برای جاسازی فونت ها در صفحات وب است تا بتوانید از فونت های اختصاصی فراتر از Arial، Times New Roman، Georgia استفاده کنید - که بعضی از این فونت های وب ایمن ذکر شده است.

WOFF به W3C به عنوان استاندارد برای بسته بندی فونت ها برای صفحات وب ارسال شد. این یک پیش نویس کاری در تاریخ 16 نوامبر 2010 بود. امروز ما در واقع WOFF 2.0 داریم که فشرده سازی را از اولین نسخه فرمت تقریبا 30٪ بهبود می بخشد. در برخی موارد، این صرفه جویی ها حتی بیشتر قابل توجه هستند!

چرا از WOFF استفاده میکنید؟

فونت های وب، از جمله کسانی که از طریق فرمت WOFF تحویل داده می شوند، مزایای زیادی نسبت به گزینه های دیگر فونت را ارائه می دهند. به همان اندازه که فونت های ایمن وب مورد استفاده قرار گرفته است، و مطمئنا هنوز هم برای این فونت ها در محل کار ما وجود دارد، انتخاب های ما نیز گسترش یافته و گزینه های تایپوگرافی ما را گسترش می دهد.

فونتهای WOFF دارای مزایای زیر هستند:

• آنها بیشتر از فونت ها به عنوان تصاویر استفاده می شوند. سبک WOFF ساده متن HTML با CSS، به شما امکان دسترسی و کنترل طراحی که تصاویر اجازه نمی دهد.
• فایل های WOFF شامل اطلاعات تایپوگرافی مانند فرم های متنی و شخصیت های قدیمی است. این به صفحات وب شما کمک می کند تا تایپوگرافی بهتر باشد، زیرا شما از شخصیت های صحیح استفاده می کنید، نه فقط تقریبی.

• فونت های WOFF می توانند در بین المللی سازی کمک کنند زیرا شما می توانید فونت ها را با شخصیت های دیگر زبان ها جاسازی کنید.
• مانند تمام متن سبک CSS، فونت هایی با WOFF مدلسازی شده است که موتور جستجوگر دوستانه تر است. موتورهای جستجو "متن" را در یک تصویر جاسازی نمی کنند و در حالی که متن ALT می تواند کمک کند، جایگزینی برای متن وجود ندارد.
• فونت های WOFF فشرده شده اند، بنابراین آنها از سایر انواع فایل های فونت کوچکتر هستند. این به سرعت دانلود سایت و عملکرد کلی کمک خواهد کرد.
• شما می توانید فایل های WOFF را برای حفظ هویت نام تجاری خود با تعبیه فونت های شرکتی خود به عنوان فایل های WOFF استفاده کنید.

پشتیبانی WOFF مرورگر

WOFF پشتیبانی مرورگر عالی در مرورگرهای مدرن دارد، از جمله:

• Chrome 6+
• فایرفاکس 3.6 +
• اینترنت اکسپلورر 9 +
• اپرا 11.1+
• سافاری 5.1 +

این در حالی است که این روزها در سراسر هیئت مدیره پشتیبانی می شود، با استثنا تنها که تمام نسخه های اپرا مینی است.

چگونگی استفاده از فونت WOFF

برای استفاده از یک فایل WOFF، شما باید یک فایل WOFF را به سرور وب خود آپلود کنید، نام آن را با اموال @ font-face ارسال کنید و سپس فونت را در CSS خود بنویسید. مثلا:

1. فونت را به نام myWoffFont.woff به پوشه / fonts سرور وب آپلود کنید.
2. در فایل CSS شما یک بخش @ font-face اضافه کنید:

   @ font-face {
   فونت خانواده: myWoffFont؛
   src: url ('/ fonts / myWoffFont.woff') فرمت ('خاموش')؛
   }

1. نام فونت جدید (myWoffFont) را به ستون فونت CSS اضافه کنید، مانند هر فونت دیگر:

   پ {
   font-family: myWoffFont ، Geneva، Arial، Helvetica، sans-serif؛
   }

از کجا دریافت فونت WOFF

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

• کتابخانه فونت باز
• سنجاب قلم

اگر مجوز دارید از یک فونت که در فرمت WOFF موجود نیست استفاده کنید، می توانید از یک سازنده WOFF مانند Font Squirrel برای تبدیل فایل های فونت خود به فایل های WOFF استفاده کنید. همچنین یک ابزار خط فرمانی به نام sfnt2woff وجود دارد که می توانید در مکینتاش و ویندوز برای تبدیل فونت TrueType / OpenType به WOFF استفاده کنید.

باینری مناسب را برای سیستم خود دانلود کنید و آن را در خط فرمان (یا ترمینال) اجرا کنید و دستورالعمل ها را دنبال کنید.

مثال WOFF

در اینجا چند نمونه از فایلهای WOFF وجود دارد: صفحه WOFF در HTML5 در 24 ساعت.

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 7/11/17