javascript - Raphael 的 `getFont` 方法不起作用(？)

Question

我在使用 Raphael.js 的 print 方法创建文本时遇到了一些问题。更准确地说，print 方法需要的 getFont 方法返回一个 undefined 值。我组装了一个非常简单的 fiddle here试图找到问题的根源，但到目前为止还没有运气。相同的 fiddle 代码如下:

<div id="canvas" style="width:500px; height:300px; outline: 1px solid #000;"></div>​

和 JavaScript:

var canvas, font, text;

canvas = new Raphael(document.getElementById("canvas", 500, 300));
font = canvas.getFont("Arial");
text = canvas.print(0, 0, "Some text", font, 24).attr({ "fill": "#C00" });​

创建 Canvas ，甚至绘制路径(尽管 font 的值未定义)，但返回未定义的字体对象。我也尝试过使用“Arial”字体。毕竟，这两个是标准字体，所以我们不是在谈论自定义字体。

知道为什么会这样吗？

Answer 1

Raphael 的 print 方法要求您使用 Cufon-font-files。来自 getFont 上的文档:

Finds font object in the registered fonts by given parameters.

并在 registerFont 进一步阅读:

Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file.

有点扭曲......

因此，如果您想要/需要使用 print 方法，您必须转换并提供正确格式的字体文件，请阅读 cufon here .

如果你想使用系统字体(或webfonts)你可以使用 Paper.text() 方法非常易于使用，您可以使用 CSS 等设置文本样式。