SVG에서 Webfont 생성
소개
웹상에서 아이콘의 색을 동적으로 바꾸고 싶었기 때문에 Webfont를 사용하기로 했다.
처음에는 SVG 화상을 사용하고 있었지만, 색의 변경이나 사이즈의 변경, 로드시의 화상 사이즈 등 여러가지 번거로움이 많았으므로 Webfont화하는 것에.
(혹시 object 태그로 사용하고 있었기 때문에 불편함이 있었을 뿐일지도…)
HTTP 요청을 줄이기 위해 [WebFont 편] 드래그 앤 드롭하여 명령 두드려 웨이
상기 URL을 참고로, grunt-webfont 로 하는 것에.
준비
우선 필요한 것을 설치
※ node 는 벌써 인스톨 되고 있는 것으로 한다
$ brew instal ttfautohint fontforge --with-python
적절하게 변환을위한 디렉토리 만들기
$ mkdir ~/Desktop/SvgToWebfont
$ cd ~/Desktop/SvgToWebfont
다음으로 package.json 을 준비한다
package.json
{
"name": "SvgToWebfont",
"version": "0.0.1",
"description": "Convert SVG file to Webfont",
"main": "Gruntfile.js",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-webfont": "^0.4.8"
}
}
패키지 설치
$ npm install
그런 다음 Gruntfile.js를 만듭니다.
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-webfont');
grunt.initConfig ({
pkg: grunt.file.readJSON('package.json'),
webfont: {
icons: {
src: 'icons/*.svg',
dest: 'build/fonts'
}
}
});
grunt.registerTask('default', ['webfont']);
}
변환
디렉토리 구조는 이런 느낌
SvgToWebfont
├── build
│ └── fonts
├── icons
└── node_modules
grunt 실행
$ grunt
그리고 build/fonts 아래에 파일이 출력된다.
build/fonts
├── icons.css
├── icons.eot
├── icons.html
├── icons.svg
├── icons.ttf
└── icons.woff
사용
build/fonts 를 통째로 복사해서 사용하는 것만.
사용할 때는 build/fonts 디렉토리를 통째로 복사해, icons.css 만 읽어내면 OK.
<link rel="stylesheet" href="{{your path}}/icons.css"></link>
덧붙여서 icons.html 파일을 열면 아이콘 목록이나 Webfont를 사용하기위한 클래스 이름이 쓰여있는 페이지가 있습니다.
이것을 참고로
<body>
<i class="icon icon_hoge"></i>
</body>
라고 쓰면 아이콘을 사용할 수 있다.
소관
icon icon_hoge 의 icon 부분을 좋아하게 변경할 수 있지만 그것은 또 다른 기회에 Reference
이 문제에 관하여(SVG에서 Webfont 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoshinarl/items/b4749fb2aedf8397df8b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
