Adobe Blank（Webフォント）を使った画像置換 New Kellum method
初めてレスポンシブ案件のコーディングをすることになりました。
メディアクエリで背景画像を入れ替えたりする都合上、避けて通れないのが画像置換。なにかいいやり方がないかなと、調べていたらおそらく日本語ではまだ紹介されていないNew Kellum methodという方法を発見したのでご紹介します。
画像置換とは
サンプル
このように、タグの中に入っているテキストを隠しつつ、背景画像を表示させる方法です。
コードはこんな風になっています。
■html
<p>画像ですよ！</p>
■CSS
p {
width: 113px;
height: 38px;
background: url('置き換えたい画像のURL') no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Scott Kellum Methodという方法で、-9999などで画面の外にテキストを飛ばしてしまうより軽いとのことです*1。
今のところこれがメジャーなのかな、と思いきや、New Kellum methodというものがありました。
New Kellum method
サンプル
画像ですよ！
■html
<p>画像ですよ！</p>
■CSS
@font-face {
font-family: "AdobeBlank";
font-weight: 100;
font-style: normal;
src: local('AdobeBlank.otf'),
url("AdobeBlank.eot") format('eot'),
url("AdobeBlank.ttf.woff") format('woff');
}
p {
background: url('置き換えたい画像のURL') no-repeat;
font-family: AdobeBlank;
}※サンプルはgoogleドライブにfontファイルを入れてWebフォントとしています。
乏しい英語力を総動員した結果わかったのですが、Adobeがオープンソースで出している目に見えず、空白にもならないフォントを利用して画像置換を行う方法のようです。
米Adobe、見えないフォント「Adobe Blank」をオープンソースで公開 | OSDN Magazine
本来の想定としては、重たいWebフォントを読み込むまでの間、標準のフォントが表示されないようにしたりするものだそうです。サンプル通り日本語でも使える様子。特に高さや幅を指定しなくてもぺちゃんこになって置換している背景画像が見えなくなるということはないのかも。サンプルは画像が小さいだけかも知れないですが……。
ざっと調べてみましたが、この方法、日本語で紹介しているところは見当たりませんでした。日本語のWebフォントは重たくて難しいですから、発案当初（2013年くらい？）はみんなピンとこなかったのかも知れないですね。
こんな方法があるんだ、と感心しました。
Webフォントとしてはアイコンフォントなどはかなり使われるようになってきたし、画像置換の方法としてはそろそろ実用を考えてもいいものなのかも知れません。
*1:ただ、現在では通信速度や端末性能の向上により、それ程差はない場合も。また、改行するテキストには使えなかった。2行目のテキストが消えない。
