From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/text-rendering/index.html | 130 +++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 files/ja/web/css/text-rendering/index.html (limited to 'files/ja/web/css/text-rendering') diff --git a/files/ja/web/css/text-rendering/index.html b/files/ja/web/css/text-rendering/index.html new file mode 100644 index 0000000000..581c2fd82e --- /dev/null +++ b/files/ja/web/css/text-rendering/index.html @@ -0,0 +1,130 @@ +--- +title: text-rendering +slug: Web/CSS/text-rendering +tags: + - CSS + - SVG +translation_of: Web/CSS/text-rendering +--- +
{{CSSRef}}
+ +

CSS の text-rendering プロパティは、テキストを描画するときの最適化方法に関する情報をレンダリングエンジンに提供します。

+ +

ブラウザーは速さ、読みやすさ、位置の正確さをトレードオフにします。

+ +
/* キーワード値 */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* グローバル値 */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+
+ +
+

メモ: text-rendering プロパティは SVG のプロパティであり、 CSS 標準では定義されていません。しかしながら、 Windows, MacOS, Linux の Gecko や WebKit のブラウザーは、このプロパティを HTML 及び XML コンテンツに適用することができます。

+
+ +

とても目に見えやすい効果は optimizeLegibility で、一部のフォント (例えば、 Microsoft Calibri, Candara, Constantia, Corbel, または DejaVu フォントファミリ) において 20px より小さい文字に合字 (ff, fi, fl, など) を適用します。

+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
auto
+
ブラウザーはテキストを描画する際に、速さ、読みやすさ、位置の正確さの最適化について経験的な推測を行います。この値のブラウザーによる解釈の違いについては、ブラウザーの対応をご覧ください。
+
optimizeSpeed
+
ブラウザーは文字を描画する際に、読みやすさや位置の正確さよりも、速さを強調します。カーニングや合字を無効にします。
+
optimizeLegibility
+
ブラウザーは速さや位置の正確さよりも、読みやすさを強調します。カーニングを有効にし、合字は任意です。
+
geometricPrecision
+
+

ブラウザーは速さや読みやすさよりも、位置の正確さを強調します。フォントの一部の側面 — カーニングなど — は、倍率に比例しません。そのため、この値はこれらのフォントを使ったテキストを美しくすることができます。

+ +

SVG では、テキストが拡大または縮小されるとき、ブラウザーはテキストの最終的な寸法 (特定のフォントの大きさと適用される倍率によって決まる) を計算し、プラットフォームのフォントシステムに計算値のフォントを要求します。しかし、大きさ9で倍率140%のフォントを要求すると、フォントの大きさの結果は12.6となり、フォントシステムに存在するものではなくなるので、ブラウザーはフォントの大きさを12に丸めます。結果的に、テキストは段階的な倍率になります。

+ +

しかし、 geometricPrecision は — レンダリングエンジンが完全に対応していれば — なめらかにテキストを拡縮できます。倍率が大きい場合、文字列の描画があまり美しくならないかもしれませんが、寸法は Windows や Linux が対応しているフォントの大きさに切り上げられたり切り捨てられたりせず、期待通りになります。

+ +

メモ: WebKit は指定された値を厳密に適用しますが、 Gecko は値を optimizeLegibility と同様に扱います。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

optimizeLegibility の自動的な適用

+ +

font-size が 20px 未満の場合にブラウザーが自動的に optimizeLegibility を使用する方法を紹介します。

+ +

HTML

+ +
<p class="small">LYoWAT - ff fi fl ffl</p>
+<p class="big">LYoWAT - ff fi fl ffl</p>
+ +

CSS

+ +
.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }
+ +

結果

+ +

{{ EmbedLiveSample('Automatic_application_of_optimizeLegibility') }}

+ +

optimizeSpeed と optimizeLegibility

+ +

この例は、 optimizeSpeed と optimizeLegibility の (このブラウザーでの) 表示方法の違いを紹介します (ブラウザーによって違います)。

+ +

HTML

+ +
<p class="speed">LYoWAT - ff fi fl ffl</p>
+<p class="legibility">LYoWAT - ff fi fl ffl</p>
+ +

CSS

+ +
p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }
+ +

結果

+ +

{{ EmbedLiveSample('optimizeSpeed_vs_optimizeLegibility') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG2')}}変更なし
{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG1.1')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.text-rendering")}}

-- cgit v1.2.3-54-g00ecf