grunt m2webfont

สร้าง webfont จากไอคอน SVG

ดัดแปลงสำหรับ Magento 2

---

ข้อมูลทั่วไป

แพ็คเกจได้รับการขยายจาก Grunt-Webfont และปรับให้เข้ากับ Magento 2 ด้วยตัวประมวลผล preprocessor น้อยกว่า:
https://www.npmjs.com/package/grunt-webfont

สำคัญ

1. ปลั๊กอินนี้ต้องใช้คำราม 0.4 โปรดทราบว่า ttfautohint เป็นตัวเลือก แต่ตัวอักษรที่สร้างขึ้นของคุณจะไม่ได้รับการบอกกล่าวอย่างถูกต้องหากไม่ได้ติดตั้ง และให้แน่ใจว่าคุณไม่ได้ใช้ ttfautohint 0.97 เพราะเวอร์ชันนั้นไม่ทำงาน
2. ปลั๊กอินนี้ต้องการเวอร์ชันโหนด <= 12
   หากเวอร์ชันจะใหญ่กว่าที่คุณจะมีข้อผิดพลาด:
   

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

3. fontforge ไม่จำเป็นสำหรับเครื่องยนต์ node

เพื่อลดระดับโหนดเวอร์ชันของคุณ

ใช้ NVM

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

สำหรับ OS X คุณสามารถใช้ Brew

 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

ลินเวกซ์

 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 'Styles หรือคลาส HTML เพื่อเพิ่มไอคอน

แทนที่ส่วน {ชื่อ} เป็นชื่อของไอคอน
ตัวอย่าง: @od-icon-arrow-down

น้อย

mixin .od-icon(@od-icon-{name}) จะเพิ่มคุณสมบัติเช่น: เนื้อหาและ font-family

 .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 คุณต้องติดตั้งเครื่องยนต์ลงในระบบปฏิบัติการของคุณ
ดูคำแนะนำด้านบน ( การติดตั้ง )
เพียงแค่สร้างไอคอนใหม่หลังจากการติดตั้ง

ttf2woff2.js: 3 asm.js ไม่ถูกต้อง: สมาชิก stdlib ไม่ถูกต้อง

ปรับลดรุ่นโหนดของคุณเป็น 12
ดูคำแนะนำด้านบน ( สำคัญ )

ลิงค์

• https://www.npmjs.com/package/grunt-webfont
• https://www.npmjs.com/package/grunt-m2webfont