grunt m2webfont
1.0.0
このパッケージは、Grunt-Webfontから拡張されており、Preprocessorが少ないMagento 2に適応しています。
https://www.npmjs.com/package/grunt-webfont
ttfautohintはオプションですが、生成されたフォントは、インストールされていない場合、適切に示唆されません。また、そのバージョンが機能しないため、 ttfautohint 0.97を使用しないようにしてください。 ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib
nodeエンジンにはfontforgeは必要ありません。https://github.com/nvm/nvm/blob/master/readme.md
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
brew install ttfautohint fontforge --with-python
sudo apt-get install fontforge ttfautohint
ttfautohint （オプション）をインストールします。
次に、 fontforgeをインストールします。
C:Program Files (x86)FontForgeBuildsbin PATH環境変数に追加します。 作成されたテーマのフォルダーweb/images/icons/fontにすべてのSVGアイコンを追加します。
例：
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
スタイルをインポートおよび構築した後、スタイルのミキシンまたはHTMLクラスを使用してアイコンを追加できます。
フラグメント{name}をアイコンの名前に置き換えます。
例： @od-icon-arrow-down
mixin .od-icon(@od-icon-{name})は、次のようなプロパティを追加します
.class::before {
.od-icon(@od-icon-{name});
}
<i class="od-icon od-icon-{name}"></i>
フォントを構築するデフォルトのエンジンは、最小依存症を保存するためのGruntの構成ファイルのノードです。しかし、生成されたアイコンは壊れている可能性があります。この問題を修正するには、エンジンを構成内のnodeからfontforgeに変更する必要があります。
ファイルdev/tools/grunt/configs/m2webfont.jsの行にコメントするために：
const options = {
...
// engine: 'node',
}
エンジンをオプションに設定しない場合、デフォルト値エンジン'fontforge'があります。
ただし、fontforgeを使用するには、OSにエンジンをインストールする必要があります。
上記の指示を参照してください（インストール）。
インストール後にアイコンを再構築するだけです。
ノードバージョンを12にダウングレードします。
上記の指示を参照してください（重要）。
