42

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

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

4

6 に答える 6

36

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

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 XP 上の Chrome 21 は、フォントの置換をまったく実行できず、別のフォントの文字記号を使用するのではなく、欠落している文字記号を表示し、テキストが誤って他の要素と重なって表示されました。

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 の互換性の問題と一般的なパフォーマンスの問題が強調されています

于 2012-09-14T18:30:44.613 に答える
25

2012 年 4 月 29 日 18:27 に最終更新された MDNテキスト レンダリングページから、次のように表示されます。

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

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

デフォルトでは

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

したがって、この機能は (まだ) 標準ではなく、ほとんどのブラウザーがサポートしていないため、ブラウザーにこのような詳細を処理させることが最善の選択肢であると想定しても安全です。

于 2012-06-05T13:07:10.473 に答える
8

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

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

于 2013-03-06T07:32:49.333 に答える
2

「text-rendering: optimizelegibility」を使用すると、Android ネイティブ ブラウザー (4.2 & 4.3) でレンダリング エラーが発生します。この属性を@font-faceによる新しいフォントの読み込みと組み合わせて使用​​すると、フォントはまったく表示されません (フォールバックのみ)。「text-rendering: optimizelegibility」と @font-face がないと、フォントが読み込まれ、期待どおりに表示されます。

于 2014-07-14T13:57:03.570 に答える
0

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

Javascript がオプションの場合、Github でホストされているカーニングとカーニングのペアに対する JavaScript アプローチである Kerning.js が有望に見えます。

http://kerningjs.com

また、タイポグラフィに真剣に取り組んでいる場合は、Font Squirrel という無料で使用できる Web フォントがあります。

http://www.fontsquirrel.com

于 2013-02-02T18:14:19.863 に答える