gpt4 book ai didi

svg - Opera 中糟糕的 SVG 文本质量

转载 作者:行者123 更新时间:2023-12-04 05:09:01 25 4
gpt4 key购买 nike

我正在尝试渲染包含一些文本的 SVG 文档。 Chrome/FF/Safari 中的一切都很好:

enter image description here

但是在 Opera (v12.14, Mac OS X) 中字体看起来非常难看:

enter image description here

这是正常的还是我做错了什么?是否有可能提高渲染质量?这是代码:

<?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 的回答):

    enter image description here

    结果仍然比其他浏览器差,但目前看来,它是 Mac OS Opera 中最好的。

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

    最佳答案

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

    解决方法是指定 text-rendering="geometricPrecision" .这使得 Opera 使用字形轮廓进行渲染,而不是将文本渲染推迟到平台。但是,请注意,这通常会导致性能稍差。另请注意,使用 geometricPrecision不会在 Opera 中启用子像素文本渲染,但文本通常看起来有点不同(通常根据像素网格对齐方式有轻微的模糊)。

    关于svg - Opera 中糟糕的 SVG 文本质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15121653/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com