sIFR でアンチエイリアス フォントの埋め込み
sIFR とは？
sIFRは、Flash に埋め込んだフォントのアウトラインと JavaScript を利用して、制作者のお好みのタイプフェイスでテキストを表示する仕組みです。
僕がこれまでいた大学の世界ででも、アクセシビリティ確保＋セマンティックマークアップと、見栄え重視という２つのトレードオフに関する対立はしばしばありました。その、ひとつの歩み寄り策として、目下、制作している新しいブログで、sIFRという仕組みを導入してみることにしました。
sIFR の入手先
サンプルと HTML ソース
サンプルで示したように、ASCII 文字だけでなく、日本語や中国語といったマルチバイト文字も扱うことができます。
sIFR 導入のメリット
- （権利関係の問題さえクリアなら）好きなタイプフェイスを、アンチエイリアスで表示できる
- Flash 6+ が動くブラウザなら、クロスプラットーホーム＋クロスブラウザで動作する
- 閲覧者（エンドユーザー）のフォント環境に依存しない
- font 要素（HTML）や font-family プロパティ（CSS）を一切使わない
- Flash や JavaScript を切っても、本来のプレーンテキストが表示される
- 生成された Flash テキストは、マウスでドラッグ・コピーができる
- 画像を一切 使わないので、メンテナンスコストが劇的に低く抑えられる
- 適用する場所を CSSセレクタで指定できる（子セレクタや、id, class セレクタも利用可）
- 日本語や中国語にも対応（要 Flash Professional + お好みのフォント）
- （ただ利用するだけなら、あまり関係ないけど）redistribute 時のソースコード汚染範囲の狭い LGPL ライセンス
sIFR 導入の注意点
- 日本語フォントの場合、表示がかなり重くなる（見出し要素以外のテキストに適用することは、本家でも非推奨）
- 任意のフォントを .swf に埋め込むのに .fla の編集が可能で、フォントの埋め込みにも対応しているアプリケーションが必要
- フォントを埋め込む前に、当該フォントのライセンス規約を要確認のこと
導入の手順
基本的な導入手順は、（英語ですが）以下のドキュメントを参考にして下さい。余力があったら、日本語に翻訳するかもしれません。(^v^;) （ただ、このままではちょっと不親切な気もするので、参考になる日本語リソースを、このエントリーの末尾に一応 挙げておきますので、とりあえずそれで許してください。）
非ASCII TTF を .swf に埋め込む方法だけ、ドキュメントが見あたらなかったので、以下にスクリーンショットを掲載しておきます。
任意のフォントを選択
ちなみにフリーの手書き風フォント Y.OzFont の Y.Oz さんに問い合わせたところ、Y.OzFont の sIFR 利用はまったく問題ないとのお返事をいただきました。ありがとうございます！m(_ _ )m
利用する文字の領域を選択
参考リソース
- sIFRの設置方法（lush life*）
- sIFRで日本語が扱えるか試してみた（generative.info::Daily）
- BJKit(BeautifulJapaneseKit)（ideaman's）
| 固定リンク
「［Web］JavaScripts」カテゴリの記事
- sIFR でアンチエイリアス フォントの埋め込み(2006.12.06)
- 振る舞い分離 JavaScript ライブラリ一覧（途中）(2006.06.11)
- 続 JavaScript ソースが HTML から消える日(2006.06.10)
- niftycube.js - 角丸効果 JavaScript ライブラリ(2006.05.14)
- 邦人による Ajax 関連書(2006.05.07)
この記事へのコメントは終了しました。
コメント
我々の製品／サービスも ｓIFR に触発されたものです。
フォントの許諾権については、モリサワ他数社から別途ライセンスを受けており、「Ｇｌｙｐｈ－Ｏｎ！フォント・サービス」として提供しております。
ご参考まで。
http://glyph-on.jp/
http://glyph-on.jp/demo/
投稿: Glyph-On! | 2006-12-27 03:40