0

我正在尝试创建编辑器，它将通过使用路径创建文本的像素完美副本。要创建 SVG 路径，我使用 Raphael.js打印方法。问题是我无法理解如何设置print函数以使其与 html 元素（即跨度）中的文本完全相同。

以下是print调用示例：

var textPath = _r.print(0, 0, 'Default text', font1Cufon, 16, 'baseline', 0);

即我有这样的跨度：

<span class="text">Default text</span>

CSS：

.text {
    top: 0;
    left: 0;
    font-family: 'font1';
    font-size: 16px;
}

这不是产品代码，但我认为主要思想很清楚。它几乎可以工作，但两种类型的文本之间存在一些偏移。有人知道如何同步它们吗？

4

1 回答 1

1

不幸的是，您无法像处理 SVG 路径渲染那样完全控制 HTML 文本渲染过程使用的字体渲染引擎。除其他事项外，字母间距、字距调整、抗锯齿、亚像素抗锯齿甚至特定字体系列字形选择可能存在细微差异，不仅在操作系统之间，甚至在浏览器之间。

一般来说，这都是最好的：浏览器中的字体通常被设计为与操作系统级别的整体字体显示选择保持一致。我很欣赏它使您想做的事情变得非常困难。如果您有一些几乎可以工作的东西并且您可以控制浏览器/操作系统/字体设置，那么一种选择是手动定位每个字母，就像在lettering.js中所做的那样。

于 2013-03-21T15:04:24.820 回答