يتيح لك هذا البرنامج المساعد تحويل ملفات .ttf و .otf إلى تنسيقات خطوط أخرى مختلفة مثل .eot و .ttf و .svg و .woff و .woff2 باستخدام fontfacegen NPM الحالية.
fontfacegen
fontfile.ttf ---------------> fontfile.ttf
fontfile.eot
fontfile.svg
fontfile.woff
fontfile.woff2
npm install fontfacegen
npm install fontfacegen-webpack-plugin
تتطلب الوحدة النمطية fontfacegen-webpack-plugin ، قم بإنشاء مثيل من FontfacegenWebpackPlugin ونقل المثيل إلى صفيف الإضافات.
const FontfacegenWebpackPlugin = require ( 'fontfacegen-webpack-plugin' )
module . exports = {
entry : 'index.js' ,
output : {
path : 'dist' ,
filename : 'index_bundle.js'
} ,
plugins : [
new FontfacegenWebpackPlugin ( { tasks : [ 'fontfile.ttf' , 'anotherfont.otf' ] } )
]
}سيؤدي هذا إلى إنشاء الملفات التالية:
dist/fontfile.eotdist/fontfile.ttfdist/fontfile.svgdist/fontfile.woffdist/fontfile.woff2dist/anotherfont.eotdist/anotherfont.ttfdist/anotherfont.svgdist/anotherfont.woffdist/anotherfont.woff2يمكنك بعد ذلك الرجوع إلى هذه الملفات في الكود الخاص بك.
@font-face {
src : url ( "dist/fontfile.eot" );
src : url ( "dist/fontfile.eot?#iefix" ) format ( "embedded-opentype" ) ,
url ( "dist/fontfile.woff2" ) format ( "woff2" ) ,
url ( "dist/fontfile.woff" ) format ( "woff" ) ,
url ( "dist/fontfile.ttf" ) format ( "ttf" ) ,
url ( "dist/fontfile.svg" ) format ( "svg" );
font-family : fontfile;
font-style : normal;
font-weight : normal;
}
@font-face {
src : url ( "dist/anotherfont.eot" );
src : url ( "dist/anotherfont.eot?#iefix" ) format ( "embedded-opentype" ) ,
url ( "dist/anotherfont.woff2" ) format ( "woff2" ) ,
url ( "dist/anotherfont.woff" ) format ( "woff" ) ,
url ( "dist/anotherfont.ttf" ) format ( "ttf" ) ,
url ( "dist/anotherfont.svg" ) format ( "svg" );
font-family : anotherfont;
font-style : normal;
font-weight : normal;
} وحدة fontfacegen-webpack-plugin تصدر فئة واحدة: FontfacegenWebpackPlugin
يتم تمرير مثيل لهذا الكائن إلى مجموعة الإضافات من خيارات تكوين WebPack.
يأخذ المنشئ كائنًا كوسيطة له الأولى:
| ملكية | وصف |
|---|---|
| المهام | مجموعة من الدلائل أو مسارات الملفات. |
- الدليل: سيتم تحويل الملفات مع الامتداد .ttf و .otf في الدليل. | |
| - ملف. سيتم تحويل هذا الملف الفردي. | |
| مجموعة فرعية | سلسلة أو صفيف مع الأحرف المطلوبة ليتم تضمينها داخل الخطوط التي تم إنشاؤها. |
أسهل طريقة للمساهمة هي بطولة هذا المشروع على جيثب!
https://github.com/daniel-araujo/fontfacegen-webpack-plugin
إذا كنت قد وجدت خطأ ، فأنت ترغب في اقتراح ميزة أو تحتاج إلى بعض المساعدة ، فلا تتردد في إنشاء مشكلة على Github:
https://github.com/daniel-araujo/fontfacegen-webpack-plugin/issues