2011 年にスマートフォンでアスキーアート（AA）を閲覧するためのウェブフォント Textar Font とそのサイト側での導入方法が公開されてからはや 2 年，現在ではほとんどのやる夫系まとめサイトで何かしらの方法によるウェブフォントの導入が行われております（私も Kuma_Lite や Saitamaar フォントを作ったりしました）．かつて iPod touch や iPhone でやる夫系まとめサイトを読むとなるとなかなかの手間がかかったものですが，今ではさしたる手間なしにだれでも気軽に見られるようになったぶん，いい時代になったものだと思います……AA が画面端などで折り返されて輪切りにならない限りは．そしてこれが 2013 年 3 月現在では案外多くのサイトで発生するのでございまして．
じつは iPhone のブラウザ全般，そして Android の一部のブラウザではサイトの視認性向上のためかテキストのフォントサイズを PC 表示時より大きくする機能がデフォルトで有効になっております．いったいどういう条件下でフォントサイズがどのくらい大きくなるのかという法則は調べきれていませんが，たとえばやる夫系まとめサイトの場合ですと CSS で 16px に設定したはずのフォントサイズが 24px や 26px に拡大されているケースが多いようです．
さてこのおせっかいお役立ち機能，CSS の設定により無効にする方法がちゃんと用意されております．方法は簡単，AA の存在する要素に対するスタイルシートに
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
の 4 行を加えるだけです．これら 4 行の意味は MDN の公式ドキュメントを参照してください……ではぶっきらぼうすぎますが，要するに「フォントサイズの拡大をやめろ，もしくは元のまま（100%）にしろ」という意味であります．-moz-text-size-adjust だけ指定が異なるのは Firefox（厳密には Gecko）がこのプロパティについてはパーセント指定に対応していないためです．なお -webkit-text-size-adjust: none はバグがあるので 2013 年 3 月時点では使ってはならぬということです．もうすぐ直るっぽいですが．
【2013 年 3 月 12 日追記】
やる夫系まとめサイト Yaruyomi 管理人の Noire Taya さんより，text-size-adjust 適用前と適用後のスクリーンショットを掲載する許可を頂きました．ありがとうございます．
0 件のコメント:
コメントを投稿