使用Raphael paper.print（）同步html元素的文本

Question

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

以下是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;
}

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

Answer 1

不幸的是，您无法完全控制HTML文本呈现过程使用的字体呈现引擎，就像使用SVG路径呈现一样。除此之外，字母间距，字距调整，抗锯齿，亚像素抗锯齿甚至特定字体系列字形选择之间可能存在细微差别，不仅在操作系统之间，甚至是浏览器。

一般来说，这一切都是最好的：浏览器中的字体通常设计为与操作系统级别的整体字体显示选择一致。我很欣赏它能让你想要做的事情非常努力。如果你有一些几乎可以工作的东西，你可以控制浏览器/操作系统/字体设置，一个选项是手动定位每个字母，就像lettering.js中所做的那样。