当然のことながら、新しい方法を古くから知られている-sIFR＆hellipと比較したいという要望がありました。
メソッドの説明
sIFR
sIFRはFlashを使用してフォントを置き換えます。 flaファイルを使用して、フォントがFlashエディターに埋め込まれ、Flashムービーが生成され、JavaScriptを使用してページを表示すると、Flashムービーが置き換えられた要素の場所に挿入され、同じ場所を占め、置き換えられたテキストと同じサイズになります。 埋め込みビデオの内部では、置換されたテキストが表示されますが、すでに必要な非標準フォントが使用されています。
したがって、sIFRを使用するには、ブラウザにFlashプラグインをインストールし、JavaScriptを有効にする必要があります。 開発中にsIFRを使用するには、インストールされたFlashエディターが必要です。
typeface.js
新しい方法は同様の方法で機能しますが、わずかに異なる方法で機能します。 生成されたFlashムービーの代わりに、JSON形式の各フォント文字の説明が使用されます。 さらに、JavaScriptライブラリは、キャンバス（FF、Opera、およびSafari）またはVML（IE）を使用して、置換された要素をレンダリングします。
したがって、クライアント側でこのテクノロジーを使用するには、JavaScriptのみが必要です。 開発者にとって、追加のツールは必要ありません。 変換はプロジェクトのWebサイトで実行できます。
実際の技術比較
テクノロジーを比較するために、3つの見出しと3つのテキストの段落を含む簡単なページを作成しました。 1つの見出しと段落はそのまま残され、残りは置き換えられました-1つはsIFR、2つ目はtypeface.jsです。 また、最初の段落では2つの単語が選択され、それぞれがいずれかの方法を使用して置き換えられました。 テストには、Ariacフォントを使用しましたが、OSフォントセットに含まれていませんでした。それが存在する場合、結果は異なる場合があります。
したがって、マークアップでブロック要素とインライン要素の置換をテストしました。 結果はページelifantiev.ru/sifr-and-typeface-compareで見ることができます
視覚的な違い
sIFRとtypeface.jsの描画が異なることがわかります。 sIFRは、より太いテキストを描画します。
また、インライン要素を置き換えるときに、sIFRはエラーを生成します。 置換されたテキストは、残りのテキストの上にあります（例の「自転車」という単語を参照）。 調整のために、交換を初期化するときにsFlashVarsに「offsetTop = 5」を追加する必要があります。
しかし、typeface.jsも同様の間違いを犯します...そして、私はまだそれを変更するクロスブラウザの方法を見つけていません、検索は続きます...同時に、typeface.jsをレンダリングした結果は占有された幅に関してより適切ですが、インライン要素の置換されたテキストは大きく見えます。
表示の違いは、レンダリング後にページを拡大したときにも顕著になります。 sIFRは変更されたページスケールを再カウントせず、フォントサイズは変更されません。 typeface.jsを使用する場合、置き換えられたブロックのフォントサイズは、ページ全体のスケールとともに変化します。
書体の欠点の1つは、置換されたテキストを選択できないことです。 ただし、Ctrl-Aでページのテキスト全体を選択すると、テキストが強調表示されてコピーされます
性能
残念ながら、typeface.jsはより多くのリソースを消費します。 これは古いブラウザで顕著です（IE6とOpera8でテストしました）。 また、typeface.jsのボリュームが増えています。 私の例のtypeface.jsファイルの合計サイズは83 kb（うち67 kbはフォント）でしたが、sIFRファイルは31 kb（うちフォントは17 kb）でした。 どちらの場合も、同じ文字セットがフォントファイルに「埋め込まれ」ました。
使いやすさ
一般に、typeface.jsは開発者にとってより便利なようです。 フォントを変換するために不要なソフトウェアをインストールする必要はありません。このテクノロジーを導入するためのすべての作業は、ライブラリとフォントファイルである2倍のJavaScriptファイルを接続することです。 typeface.jsはより柔軟で、「ネイティブ」が構成されています-ディスプレイのパラメーターを変更するために、CSS以外の場所に追加パラメーターを設定する必要はありません。 ブロックの置換のアクティベーションは、オブジェクトにクラスを設定することによってのみ実行されます。
sIFRには使いやすさの利点があります。 typeface.jsで置き換えるときにテキストを選択してバッファにコピーできないことは非常に迷惑であり、サイトでのユーザーの作業を著しく妨げる可能性があります
他に読むものは何ですか？
UPD：記事のテキストは、ミスを考慮して修正されます-OSに存在するフォントが最初に使用されていました。
UPD2： arestovは正しい-Opera 9.61では機能しません-テキストはまったく表示されません。 Opera 8-テキストは標準フォントで表示されます。