字体、Raphael和IE8

Question

我正在拼命尝试让一些谷歌字体与Raphael（SVG / VML渲染JavaScript库）在IE8上配合使用。

首先，我尝试了谷歌字体代码。

我的第二次尝试是下载并转换字体以托管自己更完整的CSS。现在，字体显示在页面的HTML部分中（在修改后的Bootstrap导航下拉菜单中），但它在Raphael生成的VML画布中无法正常工作。

示例在此处：

http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html

有可能在IE8中让它工作吗？有任何线索吗？

- Sucrenoir

---

尝试导入“eot”（开放式字型）字体，以查看它们是否正常工作，并进一步进行调试。此方法已在 msdn 上有所记录。我已经尝试了一段时间来解决这个问题，到目前为止，这是唯一一个有希望的线索。希望稍后能够解决这个问题。 - Eliran Malka

在阅读了这里之后（http://dojotoolkit.org/reference-guide/dojox/gfx.html#implementation-notes），我变得有些悲观，因为IE在7版本之后放弃了对VML上“font-family”的支持。 - Eliran Malka

另外，请查看此线程关于IE中的eot字体，看看是否有帮助。 - Eliran Malka

谢谢你提供的链接 :) 我还在努力寻找解决方案。我甚至不知道是否可能... 我会在这里告诉你我的进展。 - Sucrenoir

Answer 1

我可以确认ScottS的方法可行，但我无法在他的回答评论框中放置这些说明。

使用Cufón使自定义字体在Raphael中工作的说明：

1. 进入Cufón网站，在那里可以将字体转换为路径形状。
2. 上传您的自定义字体，选择一个字体名称，并在“第三方脚本的自定义”中单击Raphael图标。
3. 提交表单并下载弹出的Javascript文件。
4. 在Raphael Javascript包含下面包括此Javascript。
5. 像这样注册字体与Raphael，其中fontname是您在步骤2中指定的字体名称：var myfont = paper.getFont('fontname');
6. 在Raphael中使用你的字体像这样：paper.print(100, 100, 'Hello World', myfont, 100);

与Paper.text相比，性能不是很好，但它可在IE6及更高版本中使用。

- Blaise

---

好东西 - 它的表现非常出色，但是性能确实更差。另一个区别是Paper.text会将文本居中于指定点周围。 Paper.print只是从该点开始呈现它。 - Karol

我认为这应该被接受为答案，因为没有其他方法可以使自定义字体与Raphael一起使用。 - Karol

Answer 2

你尝试过Raphael中的registerFont()方法了吗？请参考http://raphaeljs.com/reference.html#Raphael.registerFont。该方法可以将字体加载到Raphael中。

根据链接上的信息，你应该能够获得VML支持，从而实现IE8的功能。至少在理论上是这样的；我没有亲自尝试过，但这些信息似乎指向了你想要走的方向。

- ScottS