webfont generator

مولد خط الويب

خط واحد يدخل ، وجميع خطوط الويب تخرج.

الغرض من هذه الأداة هو أتمتة توليد تنسيقات الخطوط الصديقة للويب وقواعد css @font-face من ملفات الخطوط التعسفية ، دون الاضطرار إلى الاعتماد على خدمات الويب أو طلب اتصال شبكة بطريقة أخرى. يمكن لهذه الأداة إنشاء عناوين URL للبيانات المضمنة إذا لزم الأمر.

راجع مقالة استخدام @font-face على css-tricks.com للحصول على مزيد من المعلومات حول تعظيم توافق الخطوط المضمنة.

Quickstart

./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 

الاستخدام

نص برنامج التشغيل generate-webfonts . في أبسطها ، تقبل ملف الخط كوسيطة وتجمع جميع الخطوط المحولة إلى دليل. يمكن أن يولد أيضًا CSS لقاعدة @font-face المناسبة أيضًا.

 ./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css

يقوم الأمر أعلاه ، والذي يستخدم تنسيقات الإخراج الافتراضية ، بإنشاء الملفات التالية:

• MyFont.css
• assets/MyFont.woff
• assets/MyFont.woff2
• assets/MyFont.ttf
• assets/MyFont.eot
• assets/MyFont.svg

سوف يحتوي ملف MyFont.css على ما يلي:

 @font-face {
  font-family : 'MyFont' ;
  src : url ( 'assets/MyFont.eot' );
  src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
       url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
       url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
       url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
       url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}

من الناحية النظرية ، بالنظر إلى قائمة ملفات الإدخال وقائمة بتنسيقات الإخراج ، سيحاول المحول تلبية جميع متطلبات تنسيق الإخراج عن طريق نسخ ملفات الإدخال المطابقة وتحويل الملفات لملء الفجوات. بسبب القيود في محولات الخطوط الأساسية ، قد يتم إنشاء بعض التنسيقات الوسيطة غير المطلوبة.

سيتجنب الأمر إنشاء ملف بتنسيق إخراج معين إذا تم سرد ملف مطابق هذا التنسيق بالفعل كأحد المدخلات. في هذه الحالة ، سيتم ببساطة نسخ ملف الإدخال إلى دليل الوجهة (أو تركه بمفرده ، إذا كان موجودًا بالفعل في دليل الإخراج). إذا لم يتم سرد مثل هذا الملف في الوسيطات ، فسيتم الكتابة فوقه بملف تم تحويله حديثًا ، حتى لو كان موجودًا بالفعل في دليل الإخراج.

انظر الخيارات أدناه للحصول على أكثر تقدمًا.

بناء الجملة

يقبل bin/generate-webfonts قائمة بملفات الخطوط كمدخلات وعدد من الخيارات:

-o --output

دليل الوجهة للملفات المحولة. حتى إذا تم إنشاء الخطوط المضمنة فقط ، فستكون هناك حاجة إلى دليل وجهة للاحتفاظ بملفات وسيطة.

-f --format

قائمة مفصولة بفاصلة من تنسيقات الإخراج. التنسيقات الممكنة هي:

• TTF
• ووف
• Woff2
• EOT
• SVG
• OTF

أي تنسيق ملوّق مع :inline سيؤدي إلى إغلاق الخط في ملف CSS كعنوان URL للبيانات المصنوع من BASE64 ، بدلاً من عنوان URL إلى ملف.

قائمة التنسيق الافتراضي هي eot,woff2,woff,ttf,svg .

-c --css

مسار ملف CSS الذي تم إنشاؤه. استخدام - ل stdout. إذا تم حذفه ، لا يتم إنشاء CSS.

-p --prefix

بادئة مسارات الخط المستخدمة في CSS المولدة. على سبيل المثال ، إذا تم تقديم ورقة الأنماط الخاصة بك من css/ ويتم تقديم خطوطك من fonts/ ، فستحتاج إلى تعيين البادئة على ../fonts/ . البادئة الافتراضية هي اسم دليل الإخراج.

--font-family

اسم عائلة الخط المستخدمة في ملف CSS. الافتراضي هو الاسم الأساسي لملف الإدخال الأول.

--verbose

إظهار الإخراج المطول أثناء التشغيل.

-v --version

نسخة العرض.

التنسيقات المدعومة

يدعم generate-webfonts تنسيقات الخط التالية:

• TTF
• ووف
• Woff2
• EOT
• SVG
• OTF

يمكن أن يتحول من وإلى أي من التنسيقات المذكورة أعلاه ، باستثناء واحد: لا يمكن تحويل EOT إلى تنسيقات أخرى.

أدوات الطرف الثالث

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

أدوات الطرف الثالث المستخدمة هي:

• Fontforge ، برنامج محرر الخطوط المجانية ، للأغراض العامة ، والسيناري
• sfntly by Google ، مكتبة Java مفتوحة المصدر والتي كانت تعمل مرة واحدة على Google Fonts
• محول Woff2 من Google

يدعم Fontforge قراءة وتوليد عدد كبير من تنسيقات الخطوط ، على الرغم من أنه لا يوجد دعم لتنسيقات EOT أو WOFF2. يمكن لمكتبة SFNTLY FASTLY تحويل خطوط TTF إلى EOT أو WOFF ، والتي تغطي إحدى هذه الثغرات. يستخدم محول Woff2 من Google أيضًا للتحويل بين تنسيقات Woff2 و TTF.

يثبت

كما ذكر أعلاه ، قم بتشغيل ./setup لتنزيل وإنشاء مكتبات الطرف الثالث. generate-webfonts تشغيل ./setup قم بتثبيت fontforge باستخدام مدير الحزمة الخاص بك أو مباشرة من موقعه على الويب.

تفترض عملية الإعداد بيئة *nix. لا يوجد حاليًا أي دعم لإعداد هذه الأداة على Windows.

مطلوب الأوامر التالية لتشغيل البرنامج النصي الإعداد:

• git
• java javac
• mvn (Maven)

يتطلب البرنامج النصي generate-webfonts نفسه Python 3.

الأفكار الختامية

يرجى التحويل بمسؤولية! احترام حقوق حقوق الطبع والنشر للمبدعين.