2014-10-31 web

自分用のWebフォントでアイコンを作る

背景

自分のWebサイトでアイコンを使っている。

問題

pngなどの画像ファイルとしてアイコンを利用すると、大きさ調整や文字とのバランスで扱いが面倒である。

解法

Webフォントとしてアイコンを作り、CSSを用意しておく。

結果

シンプルなマークアップだけで任意の大きさのアイコンが利用できる。

HTML

<link rel="stylesheet" href="https://www.hyuki.com/common/hyuki-font/hyuki-font.css" >
<h1> <i class="hyuki-ghost"></i> 結城浩 </h1>

表示

結城浩

詳細

OmniGraffleのようなドローソフトで、アイコンをSVG形式で書き出す。複数アイコンは複数ファイルにしておく。
アイコンのSVGファイルをすべてzipにまとめて、Iconvaultにアップロードする。
結果、woff, ttf, eot, svg などの拡張子がついたフォントの集合がダウンロードできる。
ダウンロードしたファイルの中にはCSSとHTMLファイルが含まれているので、それを参考にして利用する。
ファイル名をリネームする場合には、そのファイル名を参照している別のファイルがないかどうかに注意する。

実例

書き出したSVGファイル: hyuki-ghost.svg
この hyuki-ghost.svg を zip して hyuki-ghost.zip を作る。
Iconvaultにアップロードする。
結果がまとまった zip ファイルがダウンロードできる。
それを展開して編集する。

hyuki-font.css

/*
 * hyuki-font
 * Font Copyright by Hiroshi Yuki.
 * Font files are converted with iconvau.lt
 */

@font-face {
  font-family: "hyuki-font";
  src: url("hyuki-font.eot");
  src: url("hyuki-font.eot?#iefix") format("embedded-opentype"),
       url("hyuki-font.woff") format("woff"),
       url("hyuki-font.ttf") format("truetype"),
       url("hyuki-font.svg#hyuki-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

.hyuki-ghost:before {
  font-family: "hyuki-font";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.hyuki-ghost:before { content: "\f101"; }

sample.html

<link rel="stylesheet" href="hyuki-font.css" >
<i class="hyuki-ghost"></i>

参照

補足

正確なところはよくわからないけれど、うまく表示されない現象が起きていたのでメモ。

hyuki-font.cssを www.hyuki.com ドメインに置いたままで blog.textfile.org から参照した場合:
- MacのSafari, Chrome では表示される。
- MacのFirefox, Windows のFirefox では表示されない。
hyuki-font.cssを blog.textfile.org ドメインに移して blog.textfile.org から参照した場合:
- MacのSafari, Chrome, Firefox, WindowsのFirefox では表示される。

2014-10-31 web