WOFF على الانترنت شكل فتح الخط

استخدام الخطوط المخصصة على صفحات الويب

لطالما كان محتوى النص جزءًا مهمًا من مواقع الويب ، ولكن في الأيام الأولى للويب ، كان المصمّمون والمطوّرون محدودين بشدة في عنصر التحكم المطبوع على صفحات الويب الخاصة بهم. تضمن هذا وجود قيود في الخطوط التي كانوا قادرين على استخدامها بشكل موثوق في مواقعهم. من المحتمل أنك سمعت المصطلح "خطوط الويب الآمنة" المذكورة في الماضي. هذا يشير إلى مجموعة صغيرة من الخطوط التي كان من المرجح أن يتم تضمينها على جهاز كمبيوتر الشخص ، وهذا يعني أنه إذا استخدمت الموقع أحد هذه الخطوط ، فقد كان رهانًا آمنًا أنه سيتم عرضه بشكل صحيح على متصفح الشخص.

واليوم ، يتوفر لدى محترفي الويب مجموعة من الخيارات الجديدة للخطوط والنوع للعمل ، أحدها تنسيق WOFF.

ما هو الحب؟

WOFF هو اختصار يرمز إلى "تنسيق Open Open Format". يتم استخدامه لضغط الخطوط للاستخدام مع خاصية CSS @ font-face. إنها طريقة لتضمين الخطوط في صفحات الويب بحيث يمكنك استخدام خطوط متخصصة تتجاوز "Arial، Times New Roman، Georgia" النموذجية - وهي بعض من خطوط الويب الآمنة المذكورة آنفاً.

تم إرسال WOFF إلى W3C كمعيار لخطوط التغليف لصفحات الويب. أصبح مسودة العمل في 16 نوفمبر 2010. اليوم لدينا بالفعل WOFF 2.0 ، مما يحسن الضغط من الإصدار الأول من التنسيق بنسبة 30٪ تقريبًا. في بعض الحالات ، يمكن أن تكون هذه المدخرات أكثر دون قاعدية!

لماذا استخدام؟

توفر خطوط الويب ، بما في ذلك تلك التي يتم تسليمها عبر تنسيق WOFF ، الكثير من المزايا مقارنة بخيارات الخط الأخرى. ومثلما كانت خطوط الويب الآمنة مفيدة ، ولا يزال هناك بالتأكيد مكان لتلك الخطوط في عملنا ، فمن الجيد أيضًا توسيع خياراتنا وفتح خيارات الطباعة لدينا.

تحتوي الخطوط WOFF الفوائد التالية:

• يمكن الوصول إليها أكثر من الخطوط كصور. أنماط WOFF نص HTML عادي مع CSS ، مما يتيح لك إمكانية الوصول والتحكم في التصميم الذي لن تسمح به الصور.
• تتضمن ملفات WOFF معلومات مطبعية مثل الأشكال السياقية وأرقام النمط القديم. يتيح ذلك لصفحات الويب تحسين الطباعة لأنك تستخدم الأحرف الصحيحة ، وليس فقط التقريب.

• يمكن أن تساعد الخطوط WOFF في التدويل لأنه يمكنك تضمين الخطوط بأحرف من اللغات الأخرى.
• مثل جميع النصوص التي ترتكز على CSS ، فإن الخطوط التي تم تصميمها باستخدام WOFF هي أكثر ملاءمة لمحركات البحث. محركات البحث لا "ترى" نص مضمن في صورة ، وفي حين أن النص البديل يمكن أن يساعد ، لا يوجد بديل للنص نفسه.
• يتم ضغط خطوط WOFF ، بحيث تكون أصغر من الأنواع الأخرى من ملفات الخطوط. سيساعد ذلك في سرعة تنزيل الموقع والأداء العام.
• يمكنك استخدام ملفات WOFF للحفاظ على هوية علامتك التجارية عن طريق تضمين خطوط الشركة الخاصة بك كملفات WOFF.

دعم متصفح WOFF

لدى WOFF دعم ممتاز للمتصفحات في المتصفحات الحديثة ، بما في ذلك:

• Chrome 6+
• Firefox 3.6+
• إنترنت إكسبلورر 9+
• Opera 11.1+
• سفاري 5.1+

وهي مدعومة بشكل أساسي عبر اللوحة هذه الأيام ، مع استثناء وحيد يتمثل في جميع إصدارات Opera Mini.

كيفية استخدام WOFF Fonts

من أجل استخدام ملف WOFF ، تحتاج إلى تحميل ملف WOFF إلى خادم الويب الخاص بك ، ومنحه اسمًا بخاصية @ font-face ، ثم الاتصال بالخط في CSS. فمثلا:

1. قم بتحميل الخط المسمى myWoffFont.woff إلى دليل / fonts لخادم الويب.
2. في ملف CSS الخاص بك ، أضف قسم @ font-face:

   @ font-face {
   عائلة الخط: myWoffFont ،
   src: تنسيق url ('/ fonts / myWoffFont.woff') ('woff')؛
   }

1. أضف اسم الخط الجديد (myWoffFont) إلى حزمة خط CSS ، مثلما تفعل مع أي اسم خط آخر:

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

من أين تحصل على الخطوط WOFF

هناك مكانان رائعان يمكنك العثور على الكثير من خطوط WOFF المجانية للاستخدام التجاري وغير التجاري:

• افتح مكتبة الخط
• الخط السنجاب

إذا كان لديك ترخيص لاستخدام خط غير متوفر في تنسيق WOFF ، فيمكنك استخدام منشئ WOFF مثل Font Squirrel لتحويل ملفات الخط إلى ملفات WOFF. هناك أيضًا أداة سطر أوامر تسمى sfnt2woff يمكنك استخدامها على Macintosh و Windows لتحويل خطوط TrueType / OpenType إلى WOFF.

قم بتنزيل الملف الثنائي المناسب لنظامك وقم بتشغيله في سطر الأوامر (أو Terminal) واتبع التعليمات.

مثال WOFF

إليك بعض الأمثلة على ملفات WOFF: صفحة WOFF على HTML5 في 24 ساعة.

المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرار في 7/11/17