CSS3のWebフォントで「ふい字」をええ感じに使うメモ

ふい字」は煮るなり焼くなり好きに使ってええよというフォント。
使用条件の緩さがCSS3のWebフォントに使うのにピッタリ。

とりあえず↓で良い感じになりました。

ちなみにフォントは”軽量版”の「ふい字」を使っています。
等幅とプロポーショナルがあります。ブラウザがOperaの場合はプロポーショナルでしかWebフォントが反映されませんでした。

webfont.css ↓

HTMLは普通のHTML5。
CSSはformatが「eot」の行のurlの最後の「?」はIE8以下のためのものです。(詳細は後述の参考サイトで)

unicode-range で適用する文字の範囲を指定しています。
「ふい字」は使ってみてASCII文字がやや見づらいのでASCII文字ならメイリオにしています。
ただしこの unicode-range はまだ Google Chrome しか対応してないっぽい。

.hui の text-shadow はCSSでの簡易アンチエイリアシングです。

Google Chromeでの表示は↓の通り
フォントテスト

目が疲れているときに「ふい字」の文章を見ると結構キツいのでほどほどが良いですね。

参考サイト

こちらにブログ移転しました

今後は pawafuru.com という格好良いドメインでいきます。

pawafulとかとも悩んだけど、日テレの「ちはやふる」公式サイトが普通に「chihayafuru」だったのでそれに倣った感じ。

デザインは丸1日以上かかりました。Webフォントを使ってみたけど若干見づらい・・・。
でも可愛いからこのままです。