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

2011年3月18日2023年5月22日

当ページのリンクには広告が含まれています。

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

フォント「虚無体AL」をダウンロード

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

デモ

後悔なんて、あるわけない

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);}