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