diff options
Diffstat (limited to 'files/ru/web/svg/attribute/text-rendering/index.html')
| -rw-r--r-- | files/ru/web/svg/attribute/text-rendering/index.html | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.html new file mode 100644 index 0000000000..11c0bdb8cf --- /dev/null +++ b/files/ru/web/svg/attribute/text-rendering/index.html @@ -0,0 +1,87 @@ +--- +title: text-rendering +slug: Web/SVG/Attribute/text-rendering +translation_of: Web/SVG/Attribute/text-rendering +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать даные рекомендации.</p> +<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd> + <dt> + optimizeSpeed</dt> + <dd> + Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.</dd> + <dt> + optimizeLegibility</dt> + <dd> + Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.</dd> + <dt> + geometricPrecision</dt> + <dd> + Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.</dd> +</dl> +<h2 id="Пример">Пример</h2> +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="660" height="40" + text-rendering="optimizeLegibility"> + <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> + <style> + text {font: 30px 'Sofadi One', cursive;} + </style> + <g> + <text y="30">The quick brown fox jumps over the lazy dog.</text> + </g> +</svg></pre> +<p><strong>optimizeLegibility (первая) и geometricPrecision (вторая)</strong><br> + <img alt="text-rendering=optimizeLegibility" height="13" src="http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg" width="211"><br> + <img alt="text-rendering=geometricPrecision" height="13" src="http://download.g63.ru/svg/text-rendering-geometricPrecision.svg" width="211"></p> +<p>Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}</p> +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="660" height="40"> + <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' /> + <style> + text { + font: 30px 'Sofadi One', cursive; + text-rendering:optimizeLegibility; + } + </style> + <g> + <text y="30">The quick brown fox jumps over the lazy dog.</text> + </g> +</svg></pre> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>text-rendering</code> attribute</p> +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li> +</ul> |