SVG から Webfont を生成する

6667 ワード
HTML webfont grunt SVG HTML テキストリンク

はじめに

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 を使うためのクラス名が書いてあるページができる。

これを参考に

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

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

所管

  • Webfont なので複数の色を持ったものや複雑なものには向かないが、サイズや色を変更できるので好き
  • nodejs で動いているので、watch させておいてサーバにアップロードしたら自動で更新とかすれば便利かも
    • わざわざエンジニアがコマンド打たなくてもデザイナーに直接実行してもらえて便利
  • icon icon_hoge の icon 部分は好きに変更できるが、それはまた別の機会に