CSS属性text-renderingの紹介と使用
5313 ワード
概要:CSSテキストレンダリングのプロパティtext-renderingは、レンダリングエンジンが動作するときに表示テキストを最適化する方法を示します.ブラウザでは、レンダリング速度、読みやすさ(解像度)、ジオメトリ精度のバランスが取れます.SVG−スケーラブルベクトルパターン(Scalable Vector Graphics)は、W 3 Cによって作成され、2次元ベクトルパターンを記述するための拡張可能なタグ言語(XML)に基づくグラフィックフォーマットであることが知られている.SVGはXML構文に厳密に従い,テキスト形式の記述言語で画像内容を記述するため,画像解像度に関係のないベクトルグラフィック形式である.IE 9、Firefox、Opera、ChromeおよびSafariはインラインSVGをサポートする.IE 8またはそれ以前のバージョンでは、Adobe SVG ViewerをインストールしてSVGをサポートすることができる.属性text-renderingはSVG属性であり、CSS規格では定義されていない.ただし、Gecko(for Firefox)とWebKitコアのブラウザでは、Windows/Mac/LinuxシステムのHTML/XMLコンテンツにこのプロパティを適用できます.20 px未満のフォントでは、このプロパティをoptimizeLegibilityに設定すると、ff、fl、fiなどのハイフンを含むテキストがMicrosoft's Calibri、Candara、Constantia、Corbel、DejaVuなどの非常に顕著な効果をもたらします.連字がよくわからない場合は、ウィキペディアの説明を参考にしてくださいhttp://en.wikipedia.org/wiki/Typographic_ligatureデフォルト:auto適用:テキスト要素継承:yesメディアタイプ(Media Type):ビジュアルタイプ(公認メディアタイプはどれですか?W 3 Cドキュメント参照http://www.w3.org/TR/CSS2/media.html)構文:フォーマット:text-rendering:auto|optimizeSpeed|optimizeLegibility|geometricPrecision|inherit値:auto:テキストを描画すると、ブラウザがスマートに認識し、速度、明瞭度、幾何学的精度の面から最適化する必要があります.このプロパティの解釈の違いについては、次の互換性テーブルを参照してください.optimizeSpeed:テキストを描画すると、ブラウザは解像度やジオメトリ精度ではなくレンダリング速度に重点を置きます.この属性値は、ピッチ調整やハイフンには使用できません.Geckoはデフォルトでこの属性をオンにし、Firefoxはデフォルト20 px以下でこの属性をオンにします.optimizeLegibility:テキストを描画すると、ブラウザはレンダリング速度やジオメトリ精度ではなく、テキストの可読性(明瞭度)に重点を置きます.このアトリビュート値は、ピッチ調整およびハイフンに使用できます.CSS 3の@font-faceを使って文字をレンダリングすることが多くなり、読みやすさが注目され始めています.特に小さいサイズの文字.CSS属性制御のオンラインフォント表示の微妙な詳細はまだないため、Safari 5、Chrome、Webkitシリーズブラウザはtext-renderingがkerningとligaturesを有効にすることをサポートしています.GeckoとWebKitブラウザでは、このプロパティを処理する方法が異なります.前者はデフォルトでこのプロパティを有効にしますが、後者はoptimizeLegibilityに設定する必要があります.Firefoxのデフォルトの20 px以上のフォントテキストがこの属性をオンにします.geometricPrecision:テキストを描画すると、ブラウザは解像度やレンダリング速度ではなく、ジオメトリの精度に重点を置きます.フォントのいくつかの態様、例えば、文字間隔は線形スケールでレンダリングされないため、このプロパティは、これらのフォントに設定されたテキストをきれいに見せることができます.SVGでは、テキストが拡大または縮小されると、ブラウザはテキストの最終サイズ(すなわち、フォントサイズと適用スケールを指定する)を計算し、計算されたサイズに従ってシステムのフォントライブラリから適切なフォントを要求します.ただし、9 px文字の140%などのフォントサイズを要求すると、生成された文字12.6はフォントライブラリに存在しないため、ブラウザは文字を12 pxに切り捨てます.これにより、テキストのステップスケールが発生します.ただし、レンダリングエンジンがジオメトリ精度アトリビュートを完全にサポートしている場合は、ジオメトリ精度アトリビュートを使用してテキストをスムーズにスケールできます.比較的大きなスケール係数では、特に完璧なレンダリング効果は見えないかもしれませんが、表示サイズは期待通りのサイズになり、Windows/Linuxでサポートされているサイズを上にも下にも切り捨てません.geometricPrecisionとして定義、Webkitが定義属性値を正確に適用する場合、GeckoはgeometricPrecisionをoptimizeLegibilityと解釈し、optimizeLegibilityとして設定表現と同様である.≪インスタンス｜Instance｜emdw≫
/*bodyにoptimizeLegibilityを適用するとhtmlドキュメント全体の読みやすさが保証されますが、文字の連写効果が現れる可能性があります.要素にclass='foo'を適用すると、文字の連写現象を避けることができます*/
CSSコード
ワードピッチKerning
ハイフネーション効果
font: 19.9px 'DejaVu Serif',Constantia;
LYoWAT
ff fi fl ffl
font: 20px 'DejaVu Serif',Constantia;
LYoWAT
ff fi fl ffl
font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed;
LYoWAT
ff fi fl ffl
font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility;
LYoWAT
ff fi fl ffl
Geckoコアブラウザの注意事項:属性値をautoに設定と20 pxのレンダリングしきい値があり、このしきい値は好み設定browserを変更することができる.display.auto_quality_min_font_sizeという項目.(Firefoxの場合は、まずブラウザにabout:configを入力して車に戻ればアクセスできます.構成オプションを変更する方法は、ここを参照してください.http://kb.mozillazine.org/Editing_configurationmozilla preference-browserについてもっと知りたいならdisplay.auto_quality_min_font_sizeの紹介では公式ドキュメントをご覧いただけますhttp://kb.mozillazine.org/Browser.display.auto_quality_min_font_size. optimizeSpeedオプションはGecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)では無効です.テキストレンダリングの標準コードは十分速いので、それより速いコードパスはありません.これはバグです.バグ595688を参照.https://bugzilla.mozilla.org/show_bug.cgi?id=595688ブラウザ互換性テーブル:
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support for Windows and Linux
4.0 but theimplementation known bugs on Windows and Linux which can breakfont substitition,small-caps,letter-spacingor cause text to overlap
3.0(1.9)
Not supported
Not supported
5.0 (532.5)
Basic support for other operating systems
Not supported
Not supported
Not supported
Not supported
Not supported
Chrome treats this as
If the font size is 20 px or higher, Gecko browsers use
Not supported
Not supported
Safari treats this as
13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system. Introduced in WebKit 535.1 WebKit bug 60317
Gecko treats the value the same as
Not supported
Not supported
問題:
optimizeLegibilityとfont-variant:small-capsをブレンドすると、small-capsのレンダリングに失敗します.最悪の場合、Webページにテキストが表示されず、低構成のモバイルデバイスでページが正常にロードされない可能性があります.(問題バグ原文http://code.google.com/p/chromium/issues/detail?id=51973)Safari 5に対して、exをmargin,padding,border-width,outline-widthのメトリック単位として使用し、optimizeLegibilityを使用するとブラウザがクラッシュします.しかし、Safari 5.1.7(7534.57.2)の中国語版は崩壊の問題を修復したようだ.(テストページアドレスhttp://quorning.net/safari_crash.htm)
/*bodyにoptimizeLegibilityを適用するとhtmlドキュメント全体の読みやすさが保証されますが、文字の連写効果が現れる可能性があります.要素にclass='foo'を適用すると、文字の連写現象を避けることができます*/
body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }CSSコード
ワードピッチKerning
ハイフネーション効果
font: 19.9px 'DejaVu Serif',Constantia;
LYoWAT
ff fi fl ffl
font: 20px 'DejaVu Serif',Constantia;
LYoWAT
ff fi fl ffl
font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed;
LYoWAT
ff fi fl ffl
font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility;
LYoWAT
ff fi fl ffl
Geckoコアブラウザの注意事項:属性値をautoに設定と20 pxのレンダリングしきい値があり、このしきい値は好み設定browserを変更することができる.display.auto_quality_min_font_sizeという項目.(Firefoxの場合は、まずブラウザにabout:configを入力して車に戻ればアクセスできます.構成オプションを変更する方法は、ここを参照してください.http://kb.mozillazine.org/Editing_configurationmozilla preference-browserについてもっと知りたいならdisplay.auto_quality_min_font_sizeの紹介では公式ドキュメントをご覧いただけますhttp://kb.mozillazine.org/Browser.display.auto_quality_min_font_size. optimizeSpeedオプションはGecko 2.0(Firefox 4/Thunderbird 3.3/SeaMonkey 2.1)では無効です.テキストレンダリングの標準コードは十分速いので、それより速いコードパスはありません.これはバグです.バグ595688を参照.https://bugzilla.mozilla.org/show_bug.cgi?id=595688ブラウザ互換性テーブル:
Feature
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support for Windows and Linux
4.0 but theimplementation known bugs on Windows and Linux which can breakfont substitition,small-caps,letter-spacingor cause text to overlap
3.0(1.9)
Not supported
Not supported
5.0 (532.5)
Basic support for other operating systems
Not supported
Not supported
Not supported
Not supported
Not supported
auto Chrome treats this as
optimizeSpeed . Work is continuing onWebKit bug 41363 If the font size is 20 px or higher, Gecko browsers use
optimizeLegibility ; for smaller text, they use optimizeSpeed . Not supported
Not supported
Safari treats this as
optimizeSpeed . Work is continuing onWebKit bug 41363 geometricPrecision 13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system. Introduced in WebKit 535.1 WebKit bug 60317
Gecko treats the value the same as
optimizeLegibility . Not supported
Not supported
問題:
optimizeLegibilityとfont-variant:small-capsをブレンドすると、small-capsのレンダリングに失敗します.最悪の場合、Webページにテキストが表示されず、低構成のモバイルデバイスでページが正常にロードされない可能性があります.(問題バグ原文http://code.google.com/p/chromium/issues/detail?id=51973)Safari 5に対して、exをmargin,padding,border-width,outline-widthのメトリック単位として使用し、optimizeLegibilityを使用するとブラウザがクラッシュします.しかし、Safari 5.1.7(7534.57.2)の中国語版は崩壊の問題を修復したようだ.(テストページアドレスhttp://quorning.net/safari_crash.htm)