text-rendering（文本显示）

SVG内容的创建者可能想提供一个关于在浏览器渲染文本时做什么折衷的暗示。该text-rendering属性提供了这些提示。

作为一个表现属性，它也可以作为一个属性直接在一个CSS样式表，请参阅css text-rendering进一步的信息

用法说明

auto浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。

optimizeSpeed浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。optimizeLegibility浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。

geometricPrecision浏览器在绘制文本时将着重考虑几何精度， 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

例子

<?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>

optimizeLegibility (first) и geometricPrecision (second)

​

Similarly acts css text-rendering

<?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>

元素

以下元素可以使用该text-rendering属性

• <text>See also

• css text-rendering

Edit this page on MDN

 © 2005–2017 Mozilla Developer Network and individual contributors.

Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering