欧文用透明フォント「虚無体AL」

昨日公開した透明なフォント「虚無体」の欧文用を作ってみました。置き換えたい文がアルファベットだけなら、こちらのほうがサイズ小さくていいですよね。

ちなみにttfが11KB、woffとeotがそれぞれ2KBとなっています。虚無体ALでは各文字の横幅を0にしてみました。なので、選択しても反転されません。1でもあったほうがいいのかなぁ?

デモ

後悔なんて、あるわけない
後悔なんて、あるわけない
後悔なんて、あるわけない
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

一応、使用例ということで。(divを使ってますが、実際はh1などを使うことが多いでしょう。)上から

  • 普通のdivにcss適用
  • text-indent:-9999pxを使って画像置き換え
  • 昨日の虚無体と@font-faceを利用しての画像置き換え
  • 昨日の虚無体と@font-faceを利用しての画像置き換え(欧文例)
  • 虚無体ALと@font-faceを利用しての画像置き換え(欧文例)

となっています。

html

<div id="h1a">後悔なんて、あるわけない</div>
<div id="h1b">後悔なんて、あるわけない</div>
<div id="h1c" class="kyomu">後悔なんて、あるわけない</div>
<div id="h1d" class="kyomu">The quick brown fox jumps over the lazy dog</div>
<div id="h1e" class="kyomual">The quick brown fox jumps over the lazy dog</div>

css

@font-face {
	font-family:kyomu;
	src:url('http://www.o-news.net/kyomu.eot?') format("oldIE"),
	url('http://www.o-news.net/kyomu.woff') format("woff"),
	url('http://www.o-news.net/kyomu.ttf') format("truetype");
}
@font-face {
	font-family:kyomual;
	src:url('http://www.o-news.net/kyomu-al.eot?') format("oldIE"),
	url('http://www.o-news.net/kyomu-al.woff') format("woff"),
	url('http://www.o-news.net/kyomu-al.ttf') format("truetype");
}

.kyomu{font-family:kyomu;}
.kyomual{font-family:kyomual;}
#h1a{	font-size:14px;height:20px;line-height:20px;
	font-weight:bold;color:black;}
#h1b{	text-indent:-9999px;width:400px;height:20px;
	background:url(http://d.hatena.ne.jp/c-miya/files/koukai.png?d=y);}
#h1c{	width:400px;height:20px;
	background:url(http://d.hatena.ne.jp/c-miya/files/koukai.png?d=y);}
#h1d{	width:400px;height:20px;
	background:url(http://d.hatena.ne.jp/c-miya/files/koukai2.png?d=y);}
#h1e{	width:400px;height:20px;
	background:url(http://d.hatena.ne.jp/c-miya/files/koukai2.png?d=y);}