透明なフォント、作ってみました。

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

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

text-indentを使った画像置き換えはスパム判定の危険あり、“@font-face”の使用をGoogleは推奨 at SMX West 2011 | 海外SEO情報ブログ
この記事を読んでいて、はてブのコメントにも以下のように書いた。

では、すべての文字が空白のフォントを作って、それをウェブフォントとして適用させたらどうだろう？全部空白ならファイル容量って小さくならない？

（ちなみに自分が書く前にid:s-tomoさんが先に同じようなことを書いてた。やっぱり同じようなことを考える人はいるもんだ。）

でもフォントって作った事ないし（でもすごく興味はあるし）どうなんだろうー？と調べていたら、サブドメインサーバー［SE01.CSIDE.JP]＜有限会社シーサイドネット＞のTTEditというソフトが30日間フル機能で試用できるとのこと。ちゃんと買っても8000円だし…ということでインストール。ちょいちょいっとマニュアル読んで、すぐに完成！まったく透明なフォントが出来ました。

デモ

普通のフォントの場合
虚無体の場合（←虚無体で表示してます）
しねきゃぷしょんの場合（←しねきゃぷしょんで表示してます）

うまく消えて見えたでしょうか？テキスト自体は存在するため、選択してコピペすれば文字がでるはずです。選択しても色が反転したりしないので単に背景色と同色にしたのではないと分かると思います。

このフォントと@font-faceを使えば、text-indentを使わないで画像置き換えもできるんじゃないでしょうか。（テキスト自体はあるので、フォントサイズを調整する必要はあるかもしれません。画像置き換えのデモは省略。）でもこれを使う人が増えたりしたら、この方法もまたgoogleさんに嫌われてしまうかもしれませんねー。

虚無体フォント
Download

虚無体フォントだなんて、大層な名前を付けているけど、何も無いから著作権も認められないようなフォントです。ダウンロードして自由に使ってくれて構いません。私はフォント作成は素人なので、もっと使いやすいようにだとかファイルサイズを小さくだとか出来る方がいたら、改造をお願いします。

一応ttfファイルとeotファイル、woffファイルがパックになっています。ttfが235KB、eotが23KB、woffが29KBとなっています。ttfだとそんなに小さくならないですね。誰か小さく出来る方法あったら教えてください。ちなみに、上記デモで使ってるしねきゃぷしょんは1.6MBほどあったので、それに比べたらだいぶ小さいですよね。これくらいのサイズなら許される…でしょうか？

虚無体フォントの代金を上のボタン（ペイパル）から支払ってもらえるともの凄くありがたいです。（最低価格0円から！）

参考にした記事など

※ちなみに、TTEditで何も描画しないでの作成はできなかったので、璽という文字にだけ、たぶん見えないような描画をしています。