動的画像置換の実用的な技術とツール

Webデザインに関しては、私たちが呼んでいるサポートされているWebフォントの限られた選択肢によってデザインの創造性が妨げられるべきではありません。 Webセーフフォント. デザイナーは、タイトルやコンテンツに好きなフォントを自由に使用できるはずです。.

2005年には、動的画像置換が次のような技術で普及しました。 スケーラブルインマンフラッシュ交換（sIFR）. によって開発された ショーンインマン, sIFRはJavascriptとAdobe Flashを利用して、WebデザイナーがWebサイトで好きなカスタムフォントを使用しても、そのフォントを持っていないユーザーにも可視性を維持することを可能にします。そして、Webが進化し続けるにつれて、今日では、Flashの大ファンではない場合に備えて、さまざまなテクノロジを使用したより多くの代替ソリューションがあります。.

さらに苦労することなく、いくつかを見てみましょう。 動的画像置換を達成するための技術.

一般的に使用される技術

これは動的画像置換のための最も一般的に実践されている技術のいくつかです。.

スケーラブルインマンフラッシュ交換（sIFR）

SIFR カスタムフォントをWebサイトに埋め込むための最も一般的な方法の1つです。それはあなたのウェブサイトのためのカスタム書体を生成するためにJavascriptとFlashを使い、変換された書体を選択可能にします。それ以外の点では、変換された書体はソースコードにテキストとして残っているので検索エンジンはまだそれらをクロールすることができます.

SIFR 2 （推奨）は現在の安定版リリースですが、sIFRの実装を検討しているのであれば、それも知っておくべきです。 siFR 3 ベータ版もダウンロード可能です。それは少しバグがあるかもしれませんが、少なくともそれはのフォント拡張の問題を解決します SIFR 2.

役に立つかもしれないsIFRのためのツール：

sIFRvaultsIFRvaultはダウンロード可能なsIFRフォントのリポジトリです。.
sIFRジェネレータマウスを数回クリックするだけでsIFR .swfファイルを作成できるオンラインツール。変換、プレビュー、ダウンロードしたいフォントのTTFフォントをアップロードするだけです。.
フォントをsIFRに変換する.TTFフォントをアップロードすると、このWebサイトでそれらがsIFR Flashファイルに変換されます。.

SIFRライト

元のSIFRは22Kなので、 デイブ よりオブジェクト指向のアプローチを使用してそれを作り直すことを決め、そしてその結果？ 3.7kで3倍小さい.

PHP + CSS動的テキスト置換（P + C DTR）

名前が示すように、これはPHPとCSSを使用するテキスト置換メソッドです。 スチュワードローゼンバーガー. それはまたによって開発された前のバージョンからの拡張です。 R.マリーコックス テキストの折り返しや内部タグはサポートされていません。 P + C DTRに関するもう1つの優れた点は、画像テキストをCSSタグでカスタマイズできることです。.

typeface.js

何ができる typeface.js 特別なのは、それらがカスタムフォントを埋め込むためにJavascriptだけを使用し、スタイルがHTMLとCSSでさらにカスタマイズされることができる、Flashが必要とされないということです。それはオープンソースであり、それがサファリ、Firefox、IE（6以降）であるかどうか、私たちが最近使用しているほとんどのブラウザをサポートしています.

個人的には、typeface.jsを試した後で、改善の余地がある可能性があると思います。第一に、フォントはブラウザによって多少異なってレンダリングされる傾向があります。 typeface.jsを使用している場合は、Firefoxで表示されるものがSafariで表示されるものになると想定する前に、クロスブラウザチェックを実行することをお勧めします。テキストはtypeface.jsでも選択できません.

typeface.jsのカスタムフォントはコンパイルされません。つまり、ユーザーはフォントをダウンロードできます。それは著作権の問題につながる可能性があります。使用しているフォントが再配布に適していることを確認するために、十分に確認しておくことをお勧めします。.

クフォン

フラッシュ不要, クフォン sIFRに代わる素晴らしいツールであり、実装するのはとても簡単です。まず、Cufonジェネレータを使用して必要なフォントを生成してカスタマイズし、次にCufon Javascriptをソースコードに挿入して、フォントをカスタマイズしたいセレクタをスクリプトに指示します。.

Cufonの最大の問題はこれらのカスタムフォントをオンラインで使用することの法的問題でしょう。 Javascriptに埋め込まれているので、ソースコードを見ている人なら誰でも簡単に破ることができます。 Cufonのカスタムフォントは選択できません。それ以外はオフになっています.

改築

としても知られている イメージの置き換え（FLIR）, Flashを必要としないsIFRのもう1つの優れた方法です。他の代替手段がsIFRのFlashの問題に当たっているように見えます.

FaceliftはPHPとPHPのGDライブラリを使用します。それらは、テキストを選択できないというカスタムフォントの置き換えという従来の問題を継承しています。それ以外にも、私たちはそれも素晴らしいと思います.

より多くの方法

上記のテクニックはもっと広く使われているかもしれませんが、私たちはあなたのテキストを美しいカスタム書体に変換する他の方法にも気付きました.

タイプ選択

タイプ選択 typeface.js、jQuery、キャンバス、toDataURL、CSS背景プロパティ、および実際のオーバーレイテキストを利用して、Webサイトにカスタムの書体を作成します。テキスト選択はFirefox、SafariそしてChromeでも動作しますがIEでは動作しません.

Swfイメージの置き換え（swfIR）

swfIR あなたのウェブサイト上の一部またはすべての画像にさまざまな視覚効果を適用することができます。例えば、あなたはあなたのウェブサイトにどんな画像でも追加することができます、そして、swfIRはより丸い境界線を加えるか、位置を回転させるか、それに影さえ加えます.

CSS画像置換のための9つのテクニック

これらは動的なテキスト置換ではありませんが、 クリスコイエ テキストを画像に置き換えるための最大9つの異なるCSSテクニックを示します。それぞれの状態を記載したレポートカード付き - 画像がオン/オフの場合、CSSはオン/オフです。.

フォントバーナー

フォントバーナー Scalable Inman Flash Replacement（sIFR）を利用して、タイトルをカスタムフォントに変更します。あなたがする必要があるのはフォントを見つけ、それを選択しそして頭にコードを挿入することであり、そしてあなたのタイトルはすぐに変えられるでしょう.

WordPress +動的画像置換

あなたがタイトルやあなたのブログの内容さえ動的画像置換ソリューションを探しているWordPressユーザーであれば、それらのためのプラグインがある可能性があります。これが私たちが知るようになったテキスト置換プラグインです。.

sIFR WordPressプラグイン - WP sIFRWP sIFR WordPressサイトでカスタムフォントを取得することから生じる複雑さを取り除くために作成されました。 WP sIFRでは、SWFフォントファイルをプラグインディレクトリにアップロードしてからログインしてアクティブ化し、設定パネルでスタイルをすべて設定するだけです。.

Cufon WordPressプラグイン - WP-Cufonフォントファイルを変換してpluginsディレクトリにアップロードするだけです。 WordPressの管理者メニューで置き換えたいオブジェクトを有効にできます。.

イメージ置換（FLIR）WordpressプラグインFLIR for WordPressはSEOフレンドリーで、JavaScriptが有効になっている場合にのみブラウザに画像をレンダリングします。あなたのHTML / XHTMLコードは変更されずにあなたのheadタグは検索エンジンで読みやすく、ページはJavaScriptなしで読むことができます.

フォントバーナーコントロールパネルの フォントバーナー コントロールパネルプラグインを使用すると、Font Burner Webサイトで入手可能な1000以上のフリーフォントをWordPressテーマに簡単に追加できます。.