2014-10-31  web 

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

背景

問題

解法

結果

HTML

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

表示

結城浩

詳細

実例

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>

参照

補足

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

 2014-10-31  web