text-rendering(文本显示)
text-rendering
SVG内容的创建者可能想提供一个关于在浏览器渲染文本时做什么折衷的暗示。该text-rendering
属性提供了这些提示。
作为一个表现属性,它也可以作为一个属性直接在一个CSS样式表,请参阅css text-rendering
进一步的信息
用法说明
分类 | 呈现属性 |
---|---|
值 | 自动| optimizeSpeed | optimizeLegibility | geometricPrecision | 继承 |
动画 | 是 |
规范性文件 | SVG 1.1(第二版) |
auto
浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该值在不同浏览器中解释的差异,请看兼容性表。
例子
<?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
© 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