تنزيل grunt m2webfont - تنزيل رمز المصدر grunt m2webfont

grunt m2webfont

تحميل الخط

1.0.0

تنزيل

بناء webfont من أيقونات SVG

تم تكييفه مع Magento 2

معلومات عامة

تم تمديد الحزمة من Grunt-Webfont وتكييفها مع Magento 2 مع أقل معالج ما قبل:
https://www.npmjs.com/package/grunt-webfont

مهم

هذا البرنامج المساعد يتطلب Grunt 0.4. لاحظ أن ttfautohint اختياري ، ولكن لن يتم التلميح الخط الذي تم إنشاؤه بشكل صحيح إذا لم يتم تثبيته. وتأكد من عدم استخدام ttfautohint 0.97 لأن هذا الإصدار لن يعمل.
يتطلب هذا البرنامج المساعد إصدار العقدة <= 12
إذا كان الإصدار سيكون أكبر مما سيكون لديك الخطأ:

 ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib

fontforge غير مطلوب لمحرك node .

لخفض نسخة العقدة الخاصة بك

استخدم NVM

https://github.com/nvm-sh/nvm/blob/master/readme.md

لنظام التشغيل X يمكنك استخدام المشروب

 brew unlink node
brew install node@12
brew link --overwrite --dry-run node@12
echo 'export PATH="/usr/local/opt/node@12/bin:$PATH"' >> ~/.zshrc

تثبيت

أولا لجميع نظام التشغيل

 npm install grunt-m2webfont --save-dev
// or
yarn add grunt-m2webfont

OS X.

 brew install ttfautohint fontforge --with-python

Linux

 sudo apt-get install fontforge ttfautohint

النوافذ

تثبيت ttfautohint (اختياري).

ثم تثبيت fontforge .

قم بتنزيل وتثبيت Fontforge.
أضف C:Program Files (x86)FontForgeBuildsbin إلى متغير بيئة PATH .

قم بإعداد أيقونات SVG في مجلد السمة

أضف جميع أيقونات SVG إلى مجلد web/images/icons/font من سمة تم إنشاؤها.
مثال:

 app/design/frontend/{vendor}/{theme}/web/images/icons/font/*.svg

سيتم تشغيل الوحدة grunt-m2webfont لجميع الموضوعات التي تمت إضافتها إلى

 dev/tools/grunt/configs/themes.js

أو

 dev/tools/grunt/configs/local-themes.js

إذا تمت إضافة الملف local-themes.js إلى محتوى الملف grunt-config.json في المجلد الجذر للمشروع.

قم بتشغيل وحدة Grunt-M2Webfont

فقط قم بتشغيل الأمر في محطة:

 grunt m2webfont

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

بعد استيراد وأنماط البناء ، يمكنك استخدام Mixins 'Mixins أو HTML لإضافة رمز.

استبدل الجزء {name} باسم أيقونة.
مثال: @od-icon-arrow-down

أقل

سيضيف Mixin .od-icon(@od-icon-{name}) خصائص مثل: المحتوى والأسرة الخطية

 .class::before {
  .od-icon(@od-icon-{name});
}

HTML

 <i class="od-icon od-icon-{name}"></i>

مشاكل

الخط الذي تم إنشاؤه قد كسر الرموز

المحرك الافتراضي لإنشاء خط هو عقدة في ملف التكوين Grunt لحفظ الحد الأدنى من التبعية. ولكن قد يتم كسر الرموز التي تم إنشاؤها. لإصلاح هذه المشكلة ، تحتاج إلى تغيير المحرك من node إلى fontforge في التكوين.

فقط للتعليق على الصف في ملف dev/tools/grunt/configs/m2webfont.js :

 const options = {
  ...
  // engine: 'node',
}

إذا لم تقم بتعيين المحرك على الخيارات ، فسيحتوي على محرك قيمة افتراضي: 'fontforge' .

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