如何在RaphaelJS中设置文本字体

How to set Text font in RaphaelJS

本文关键字：置文本 字体 RaphaelJS      更新时间：2023-09-26

我有一个小的RaphaelJS脚本，它利用文本在屏幕上显示文本。此文本是动态的 - 它经常更新。

我想设置文本的字体。我已经下载了一个 Cufon .js 字体文件，并使用以下代码设置字体。除非，它不起作用！

。字体始终保持不变。设置颜色，以及字体大小，位置等。但不是实际字体本身。

如果我打印文本而不是使用文本，字体工作正常。但我不想那样做——它必须是动态的。

var text = paper.text(200,245,"--:--");
var paper = new Raphael( 0, 0, 600, 400) ;
var font = paper.getFont("FontName");
text.attr({ "font-size": 25, font: "FontName", "font-weight": 400, fill: lcdDisplayColour });
function updateText()
{
    /**
    .
    .
    .
    **/
    var newText = "some new text";
    text.attr({text: ""+dClockText});
}

在 HTML 文件中，我有：

<script src="raphael-min.js" type="text/javascript"></script>
<script src="nameOfCufonFile.js" type="text/javascript"></script>
<script src="myScript.js" type="text/javascript"></script>

我也尝试过：

text.attr({ "font-size": 25, font: font, ...
text.attr({ "font-size": 25, "font-family": "FontName", ...
text.attr({ "font-size": 25, "font-family": font, ...

这样的东西应该可以正常工作：

text.attr({ "font-size": 25, "font-family": "fontName, sans-serif" });

也许你在 css 中有一些用于字体的规则，它正在覆盖它？

或者，也许您的字体有问题，请尝试以下操作：

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

然后设置字体系列：

"font-family": "Pacifico"

这对你有用吗？

顺便说一句。Cufon 字体适用于 Raphael.print（） 方法，不适用于 Raphael.text（）。

相关文章：