grunt m2webfont

從SVG圖標構建WebFont

適用於Magento 2

---

一般信息

該軟件包已從Grunt-Webfont延伸，並與較少的預處理器相適應Magento 2：
https://www.npmjs.com/package/grunt-webfont

重要的

1. 該插件需要咕unt 0.4。請注意， ttfautohint是可選的，但是如果未安裝您的生成的字體，則不會正確暗示。並確保您不使用ttfautohint 0.97，因為該版本無法使用。
2. 此插件需要節點版本<= 12
   如果版本比您的錯誤大：
   

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

3. node引擎不需要fontforge 。

降級您的節點版本

使用NVM

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

對於OS 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或HTML類添加圖標。

將片段{名稱}替換為圖標的名稱。
示例： @od-icon-arrow-down

較少的

mixin .od-icon(@od-icon-{name})將添加屬性，例如：content和font-fothily

 .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