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

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での表示は↓の通り
フォントテスト

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

参考サイト


コメントを残す

メールアドレスが公開されることはありません。