phoenix-powerWeb Fontの作成や使用など

Font Awesome Icon

Font Awesomeが便利です。

1
2
3
4
5
$ echo "gem 'font-awesome-less'" >> Gemfile

$ bundle

$ gem install font-awesome-less

便利ですし、種類が豊富です。

SVGからPNGに変換する

Font Awesomeのアイコンを.pngで生成するなら、font-awesome-to-pngが便利です。カラーなども指定できます。

1
2
3
4
5
6
7
8
9
10
$ pip install pillow

$ git clone https://github.com/odyniec/font-awesome-to-png

$ cd !$:t

$ font-awesome-to-png.py --size 32 --color blue asterisk

# font-awesome-svg-png
$ npm install -g font-awesome-svg-png

ImageMagickを使うなら、以下のとおりです。

1
$ convert test.svg test.png

Macでは、qlamanagerが使えます。

1
$ qlmanage -t -s 800 -o . test.svg

SVGファイルの作成

SVG ファイルを作成する Python ライブラリ — Elliptium

inkscapeが使えます。

  • パス -> ビットマップをトレース

  • ファイル -> ドキュメント設定 -> ページサイズを描画全体または選択…

Web Fontの作成

手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT | Stronghold

Iconvaultなどのサイトジェネレーターを使用し、作成するみたいです。

私は、icomoonを使いました。

CSSの書式は、以下の様な感じになるらしいです。

1
2
3
4
5
6
7
8
9
10
11
@font-face {
    font-family: 'fontset';
    src: url('fontname.eot');
    src: url('fontname.eot?#iefix') format('embedded-opentype'),
         url('fontname.woff') format('woff'),
         url('fontname.ttf') format('truetype'),
         url('fontname.svg#fontset') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{font-family:'fontset';}

Web Fontの使用

1
2
3
4
5
6
7
8
9
$ cd ~/Downloads/icomoon

$ mv style.css ~/fonts/icomoon.css

$ cd ~/octopress/source/

$ cp -r ~/Downloads/icomoon/fonts .

$ vim _includes/head.html

あとは、head内に以下のタグを挿入します。

1
<link rel="stylesheet" href="/fonts/icomoon.css">

直前に導入したocticonsがリンクを貼るやり方でしたので、それに倣いました。

この場合は、パスを書き換えてください。

source/icomoon/icomoon.css
1
2
3
4
5
6
7
8
9
10
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot?-cyd9l8');
  src:url('icomoon.eot?#iefix-cyd9l8') format('embedded-opentype'),
    url('icomoon.woff?-cyd9l8') format('woff'),
    url('icomoon.ttf?-cyd9l8') format('truetype'),
    url('icomoon.svg?-cyd9l8#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

もちろん、CSSは、octopress/scss以下のフォルダにて記述してもOKです。

SAMPLELINK
1
<span class="icon-phoenix" style="font-size:30px;"></span>