Webフォントその後

CSS JavaScript

第二水準まで拡張してみました。結構ファイルサイズが増えてしまいました。

http://akira.info/labs/webfont/level2/

文字拡張

第二水準まで拡張しました。これにより大抵の漢字は表示できるようになったと思います。その分700Kぐらいまでファイルが肥大化してしまいました（汗）

クラス対応置換

Blog系の仕組みの場合IDではなくてクラスを指定することが多かったので、特定のクラスを置換する関数を追加しました。

IE対策

行の折り返しの時にbackground-positionの動作がおかしかったので、空のspanタグを文字の後ろにつけることにしました。この結果コピーしたときとかに空白が入るのであまり好きじゃないのですが、仕方ないですね。

おかしな動作は折り返し前の座標を引きずっているようで、１列下の文字画像が表示されてしまいます。

既存の問題

  • 結構表示が重くなってきました
  • IEで表示しない文字がある(裏とか話でぁが表示されている場所)
  • Firefoxで文字を大きくすると表示が崩れる

他のブログに組み込んでみました

http://akiraneko2008.blog95.fc2.com/

下記をヘッダーテンプレートに入れています。

<link rel="stylesheet" href="http://akira.info/labs/webfont/level2/font_24.css" type="text/css" />
<script src="http://akira.info/labs/webfont/level2/webfont.js"></script>

<script type="text/javascript">
<!--
setFont_class("div","aabody","font_aqua");
// -->
</script>

あと、文字間を1.5から1.0にしています。その分少し読みにくくなっている可能性があります。

感想

なんでIEで一部の文字が表示されないんだろう。。。他のブラウザだと問題なく表示されるんですよね。もう少し実験が必要なようです。