2

我正在尝试渲染包含一些文本的 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；
  • 使用 Arial 以外的字体；
  • 设置text-rendering="optimizeLegibility"。

这些都没有帮助。

编辑

解决方案是使用text-rendering="geometricPrecision"（参见 Erik Dahlström 的回答）：

在此处输入图像描述

结果仍然比其他浏览器差，但目前看来，它是 Opera for Mac OS 中所能获得的最好结果。

我还尝试将内容双向翻译 0.5 像素。它会稍微改变输出，但总体上不会提高质量。

4

1 回答 1

3

看起来像 Mac 上 SVG 内的文本禁用了亚像素文本渲染。

一种解决方法是指定text-rendering="geometricPrecision". 这使得 Opera 使用字形轮廓进行渲染，而不是将文本渲染推迟到平台。但是，请注意，这通常往往会稍微降低性能。另请注意，geometricPrecision在 Opera 中使用并不会启用亚像素文本渲染，但文本通常看起来会有些不同（通常会根据像素网格对齐方式有轻微的模糊）。

于 2013-03-01T14:39:08.797 回答