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

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

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で何も描画しないでの作成はできなかったので、璽という文字にだけ、たぶん見えないような描画をしています。

追記

  • アルファベットだけの欧文フォント虚無体ALも作ってみました。http://htn.to/Pj9CYM
  • くれぐれも、スパム的には使用しないでくださいね。
  • はてブコメントより

id:Narr 「買っても8000円」ということなら買ってるかもしれないので、これは余計な一言かもしれないけれども一応。TTEditは、試用版で作ったフォントは配布不可です。Q19参照→http://musashi.or.tv/tteditqa.htm

そこまで読んでませんでした…orz 後出しになってしまいましたが、ライセンス購入することにしました。教えていただきありがとうございます。
せっかくなので、普通のフォントも作ってみようと思います。自分で書いたものがフォントとして表示されるのは面白いと感じましたから。

シェアしてね!

この記事を書いた人

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

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

INDEX