grunt m2webfont
1.0.0
패키지는 Grunt-Webfont에서 연장되었으며 미세 프로세서가 적은 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-sh/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
스타일을 가져오고 건축 한 후 Styles 'Mixins 또는 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로 다운 그레이드하십시오.
위의 지침 ( 중요 )을 참조하십시오.
