13
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

SVG から Webfont を生成する

はじめに

Web 上でアイコンの色を動的に変えたかったので、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 を使うためのクラス名が書いてあるページができる。

icons.png

これを参考に

<body>
  <i class="icon icon_hoge"></i>
</body>

と書けばアイコンを使える。

所管

  • Webfont なので複数の色を持ったものや複雑なものには向かないが、サイズや色を変更できるので好き
  • nodejs で動いているので、watch させておいてサーバにアップロードしたら自動で更新とかすれば便利かも
    • わざわざエンジニアがコマンド打たなくてもデザイナーに直接実行してもらえて便利
  • icon icon_hogeicon 部分は好きに変更できるが、それはまた別の機会に
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
13
Help us understand the problem. What are the problem?