私のクライアント（ピクセルの完成度にこだわっている）は、ブラウザがフォントフェースフォントをレンダリングする方法が嫌いです。font-face alternative
現在、私はfont-squirrelを使用してOTFフォントをWebフォントに変換しています。
問題は、私には選択肢がありません。これらのテキストをすべて保持するPNGファイルを作成することはできますが、それはブラウザのようなユーザーフレンドリーなソリューションとは言えません。
私が仕事をしなければならない設計の典型的な例は次のとおりです。
あなたのアプローチでしょうか？
私は「ブラウザが@ font-faceをレンダリングする方法が嫌い」と思っています。起こっている瞬きを参照しています。もしそうでなければ、あなたは精緻化すべきです。
一番上は、ウェブフォントであり、底一つはPSDからのscreengrabあります。どちらも同じフォントファミリー、同じ間隔を使用します。クライアントは一番下のように見たいと思っています。
これを処理するもう1つの一般的な方法は、自動フォント置換（JavaScriptを使用）です。 HTMLにプレーンテキストが含まれており、ブラウザでJavaScriptを使用して置換が行われるため、このソリューションはスクリーンリーダーのユーザーにとって使いやすいものです。
この例は、技術がsIFRであり、これはオープンソースであり、Flashを置き換えて使用しています。
私は、「ブラウザが@ font-faceをレンダリングする方法が嫌い」と思っています。起こっている瞬きを参照しています。もしそうでなければ、あなたは精緻化すべきです。
現在、この点滅を削除するオプションは3つだけです。最初の2つは明白な解決策です - イメージを使用するか、Webセーフフォントを使用します。明らかに、これらは目的を破るものです。
第3の選択肢は、CSSのフォントにbase64コードを埋め込むことです。これにより、CSSファイルのサイズ（kb）が増えますが、フォントがCSSで読み込まれるために発生する瞬きを完全に排除して、セカンダリファイルがロードされても瞬きがないようにします。
@font-face {
font-family: "FontName";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
あなたに.OTFファイルを供給することができ、彼らはbase64でコードを吐き出すだろういくつかのオンラインbas64コンバータがあります。bas64フォントを含むため
使い方は次のようになります。 Here's one such converter.
私が使っているアプローチは、すべての表示テキストを表す背景イメージを作成し、実際のテキストを「隠す」ためにCSSを使用し、イメージのみを表示することです。アクセシビリティのために、display：noneまたはdisplay：hiddenを使用してテキストを隠すべきではありません。代わりに、大きな負のテキストインデントを使用して、ディスプレイの左側からテキストを移動するか、またはそれを表示領域の外側のどこかにあるネストされた絶対配置された要素に置きます。
私は通常、クリック可能な要素に含まれていないすべてのテキストにネガティブインデントを使用し、クリック可能な要素に含まれるものについてはネストされた絶対配置された要素技法を使用します（アクティブ要素のアウトラインは、一部のブラウザで発生する可能性があります）。
これはどこでもうまくいかないことに注意してください。 Flash Playerはそこにインストールできないため、特にiOSでは動作しません。 –
@SteveJorgensen：非常に良い点。 – PPvG
ところで、FLIRのようなFlashに頼っていない選択肢がありますが、一般的に設定するのは難しいことです。 – PPvG