web-dev-qa-db-ja.com

CSSルール「text-rendering：optimizelegibility;」を使用しても安全ですか？すべてのテキストに？

これに気づいた woo theme たとえば、HTMLタグに設定されているため、サイト全体のテキストに設定されています。パフォーマンスの問題を引き起こす可能性があると読みましたが、それは少し前のことです。一部の人々は、ヘッダーと大きなテキストにのみ追加することを提案しました。

ルールは変更されましたか？ブラウザはそれでうまく機能しますか？

cssfontstext-rendering
40
firefusion

いいえ：さまざまなプラットフォームで長年にわたって多くのバグが発生しており、テキストが表示されない、または正しく表示されません（以下を参照）。合字を有効にすることが目標の場合、実際には標準のプロパティ font-variant-ligatures が CSS Fonts Level で定義されており、完全に制御できます。

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

スモールキャップ、代替文字形式など、有効にできる他の活版印刷機能については、 font-variant を参照してください。

歴史

font-variant-ligaturesおよび関連するプロパティが追加される前は、古い font-feature-settings プロパティにより同じ機能を有効にできました。これは低レベルのインターフェイスであり、高レベルのインターフェイスを持たないOpenType機能を有効にする場合を除き、推奨されなくなりました。

http://blog.fontdeck.com/post/15777165734/opentype-1 には簡単な例があります：

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ にも多くの議論があります。

バグギャラリー

人気のあるHTML5 Boilerplateプロジェクトは、さまざまなレンダリングの問題のために2年前に削除しました。

https://github.com/h5bp/html5-boilerplate/issues/78

今朝修正した2つのChromiumバグにより、Windows ChromeのXP 21でフォント置換がまったく実行されず、別のフォントの1つを使用せずに欠落している文字記号が表示され、テキストが表示されました誤って他の要素と重なります：

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

http://aestheticallyloyal.com/public/optimize-legibility/ を参照してください。

http://bocoup.com/weblog/text-rendering/ Androidの互換性の問題と一般的なパフォーマンスの問題を強調

32
Chris Adams

mDNから text-rendering ページ、最終更新日18：27、2012年4月29日、読み取り：

テキストレンダリングCSSプロパティは、テキストをレンダリングするときに最適化する対象に関する情報をレンダリングエンジンに提供します。ブラウザは、速度、読みやすさ、および幾何学的精度の間でトレードオフを行います。テキストレンダリングプロパティは、CSS標準で定義されていないSVGプロパティです。ただし、GeckoおよびWebKitブラウザーでは、このプロパティをWindows、Mac OS X、およびLinuxのHTMLおよびXMLコンテンツに適用できます。

ブラウザの互換性 テーブルで見られるように、どのCSS標準でも定義されていないため、クロスブラウザの問題が発生することを示しています。

デフォルトでは

ブラウザーは、テキストの描画中に速度、読みやすさ、および幾何学的精度を最適化するタイミングについて、経験に基づいた推測を行います。

そのため、この機能は標準ではないため（yet）、ほとんどのブラウザーはそうではないため、最適なオプションはブラウザーにこのような詳細を処理させることであると想定しても安全です。サポートしています。

24
Zuul

text-rendering: optimizeLegibility;は、Webアプリの1つで使用されました。 1つを除くすべてのブラウザーで適切にレンダリングされました-chrome（64）Windows 7.

ほとんどのエンドユーザーがそのカテゴリに属していたため、プロパティを削除する必要がありました。

7
RoRRe

Chrome=はWebフォントのレンダリングを拒否していたバグを修正しました（それは常に、Web以外のものにフォールバックしました。理由はわかりませんが）。ひっかき傷の量-テキストレンダリングをoptimizeLegibility（Twitter Bootstrapによって設定されていた）からautoに設定することで問題が修正されました。

だから今のところ、答えはおそらく「いいえ」だと言えるでしょう。これは使用しないと言っているわけではありませんが、すべてに適用しないでください。必要な場所で使用し、奇妙な点や予期しない効果（特にChromeで！）を注意深くテストします。

4
Nick F

「text-rendering：optimizelegibility」を使用すると、Android native browser（4.2＆4.3）でレンダリングエラーが発生します。この属性を@ font- face、フォントはまったく表示されません（フォールバックのみ）「text-rendering：optimizelegibility」および@ font-faceがなければ、フォントはロードされ、期待どおりに表示されます。

1
Kris

CSSテキストレンダリングが不安定に見える。貧弱なCSSプロパティで時間を削る代わりに、これで行く価値があるかもしれません...

Javascriptが選択肢の場合、Kerning.jsは有望に見えます。これは、Githubでホストされるカーニングとカーニングのペアに対するJavaScriptアプローチです。

http://kerningjs.com

また、タイポグラフィに真剣に取り組んでいるなら、Font Squirrelの無料使用Webフォントがあります。

http://www.fontsquirrel.com

0
unidentified-1