Webfonts Generator - SVGからWebFontsを生成
WebFontsはよく使われるようになっています。特にアイコンフォントで便利です。文字サイズさえ指定すれば、大きなサイズでも綺麗に表示されます。しかし作成するのが大変という印象もあります。 そこで使ってみたいのがWebfonts Generatorです。なんとSVGからWebFontsを生成します。
Webfonts Generatorの使い方
Webfonts Generatorのサンプルコードです。TrueTypeやWOFF、EOTといったファイル形式で出力します。
var fs = require('fs')
var path = require('path')
var _ = require('underscore')
var webfontsGenerator = require('../src/index')
var SRC = path.join(__dirname, 'src')
var FILES = _.map(fs.readdirSync(SRC), function(file) {
return path.join(SRC, file)
})
var OPTIONS = {
dest: path.join(__dirname, '..', 'temp'),
files: FILES,
fontName: 'fontName',
types: ['svg', 'ttf', 'woff', 'woff2', 'eot'],
html: true
}
webfontsGenerator(OPTIONS, function(error) {
if (error) console.log('Fail!', error)
else console.log('Done!')
})
一緒にHTMLも出力されるので確認が簡単です。
Webfonts Generatorがあれば、後はSVGファイルさえ用意すれば良いだけです。SVGファイルはIllustratorなどが使えるでしょう。自社サービスのアイコンをSVG化し、さらにWebfonts GeneratorでWebFontsにするのは面白そうです。
Webfonts GeneratorはJavaScript製のオープンソース・ソフトウェア(Public Domain)です。
sunflowerdeath/webfonts-generator: Generator of webfonts from svg icons