欧文用透明フォント「虚無体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);}

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX