« S i M P L E * S i M P L E 炎上後のすばらしい対応 | トップページ | 気になる WordPress プラグインのリスト(の残骸..) »

2006-12-06

sIFR でアンチエイリアス フォントの埋め込み

Logo_sifr2

sIFR とは?

sIFRは、Flash に埋め込んだフォントのアウトラインと JavaScript を利用して、制作者のお好みのタイプフェイスでテキストを表示する仕組みです。

導入例 僕がこれまでいた大学の世界ででも、アクセシビリティ確保+セマンティックマークアップと、見栄え重視という2つのトレードオフに関する対立はしばしばありました。その、ひとつの歩み寄り策として、目下、制作している新しいブログで、sIFRという仕組みを導入してみることにしました。

sIFR の入手先

サンプルと HTML ソース

サンプルで示したように、ASCII 文字だけでなく、日本語や中国語といったマルチバイト文字も扱うことができます。

sIFR 導入のメリット

  1. (権利関係の問題さえクリアなら)好きなタイプフェイスを、アンチエイリアスで表示できる
  2. Flash 6+ が動くブラウザなら、クロスプラットーホーム+クロスブラウザで動作する
  3. 閲覧者(エンドユーザー)のフォント環境に依存しない
  4. font 要素(HTML)や font-family プロパティ(CSS)を一切使わない
  5. Flash や JavaScript を切っても、本来のプレーンテキストが表示される
  6. 生成された Flash テキストは、マウスでドラッグ・コピーができる
  7. 画像を一切 使わないので、メンテナンスコストが劇的に低く抑えられる
  8. 適用する場所を CSSセレクタで指定できる(子セレクタや、id, class セレクタも利用可)
  9. 日本語や中国語にも対応(要 Flash Professional + お好みのフォント)
  10. (ただ利用するだけなら、あまり関係ないけど)redistribute 時のソースコード汚染範囲の狭い LGPL ライセンス

sIFR 導入の注意点

  1. 日本語フォントの場合、表示がかなり重くなる(見出し要素以外のテキストに適用することは、本家でも非推奨)
  2. 任意のフォントを .swf に埋め込むのに .fla の編集が可能で、フォントの埋め込みにも対応しているアプリケーションが必要
  3. フォントを埋め込む前に、当該フォントのライセンス規約を要確認のこと

導入の手順

基本的な導入手順は、(英語ですが)以下のドキュメントを参考にして下さい。余力があったら、日本語に翻訳するかもしれません。(^v^;) (ただ、このままではちょっと不親切な気もするので、参考になる日本語リソースを、このエントリーの末尾に一応 挙げておきますので、とりあえずそれで許してください。)

非ASCII TTF を .swf に埋め込む方法だけ、ドキュメントが見あたらなかったので、以下にスクリーンショットを掲載しておきます。

任意のフォントを選択

Flash 6 Professional - フォントの選択

ちなみにフリーの手書き風フォント Y.OzFont の Y.Oz さんに問い合わせたところ、Y.OzFont の sIFR 利用はまったく問題ないとのお返事をいただきました。ありがとうございます!m(_ _ )m

利用する文字の領域を選択

Flash 6 Professional - 埋め込む文字の選択

参考リソース

  1. sIFRの設置方法(lush life*)
  2. sIFRで日本語が扱えるか試してみた(generative.info::Daily)
  3. BJKit(BeautifulJapaneseKit)(ideaman's)

|

« S i M P L E * S i M P L E 炎上後のすばらしい対応 | トップページ | 気になる WordPress プラグインのリスト(の残骸..) »

[Web]JavaScripts」カテゴリの記事

コメント

我々の製品/サービスも sIFR に触発されたものです。
フォントの許諾権については、モリサワ他数社から別途ライセンスを受けており、「Glyph-On!フォント・サービス」として提供しております。

ご参考まで。

http://glyph-on.jp/
http://glyph-on.jp/demo/

投稿: Glyph-On! | 2006-12-27 03:40

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/4442934

この記事へのトラックバック一覧です: sIFR でアンチエイリアス フォントの埋め込み:

» 【sIFR】…でletter-spacingを効かせる方法。 [BLOG dot USK dot CC]
今巷でグイグイ来ている(もう来終わった?)感じのsIFRでletter-spacingを効かせる方法を書きます。というかやっとこさWebデザイナーっぽい事が書けます。今まではなんかウジウジしたコーデ... [続きを読む]

受信: 2007-07-07 02:21

« S i M P L E * S i M P L E 炎上後のすばらしい対応 | トップページ | 気になる WordPress プラグインのリスト(の残骸..) »