我正在尝试渲染包含一些文本的SVG文档。 Chrome / FF / Safari中的一切都很好:
但在Opera(v12.14,Mac OS X)中,字体看起来很丑陋:
这是正常的还是我做错了什么?是否有可能提高渲染质量?这是代码:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="30" font-family="Arial" font-size="12" font-weight="bold">123 xyz XYZ</text>
<text x="10" y="50" font-family="Arial" font-size="12" font-weight="bold" fill="#666">123 xyz XYZ</text>
<text x="10" y="70" font-family="Arial" font-size="12" font-weight="normal" fill="#444">123 xyz XYZ</text>
<text x="10" y="88" font-family="Arial" font-size="10" font-weight="normal" fill="#444">123 xyz XYZ</text>
</svg>
我试过了:
@font-face
; text-rendering="optimizeLegibility"
。这些都没有帮助。
解决方案是使用text-rendering="geometricPrecision"
(参见ErikDahlström的回答):
结果仍然比其他浏览器差,但似乎现在它是Opera for Mac OS中最好的。
我也尝试将内容翻译为0.5px。它稍微改变了输出,但一般不会改善质量。
答案 0 :(得分:3)
看起来对于Mac上的SVG内的文本禁用了子像素文本呈现。
解决方法是指定text-rendering="geometricPrecision"
。这使得Opera使用字形轮廓进行渲染,而不是将文本渲染推迟到平台。但请注意,这通常会略微降低性能。另请注意,使用geometricPrecision
无法在Opera中启用子像素文本呈现,但文本通常看起来会略有不同(通常会根据像素网格对齐而略微模糊)。