Как говорится в руководстве (не так ясно, как должно), вам нужно преобразовать шрифт в формат "cufon", если вы хотите обрабатывать отдельные буквы как уникальные пути SVG.Если вы сделаете это, функция paper.print будет работать как положено.Без этого функция печати возвращает пустой массив (и происходит сбой «letters [4]»).
Экспериментально я взял два отсутствующих файла шрифтов из html5rocks:
<script src="Vegur.font.js"></script>
<script src="cufon.js"></script>
и добавилих на образец HTML-страницы:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Raphaël—JavaScript Library</title>
</head>
<body>
<div id="demo-1"></div>
<script src="raphael.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/Vegur.font.js" type="text/javascript"></script>
<script src="Scripts/cufon.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var paper = Raphael("demo-1", 320, 200);
var t = paper.text(50, 10, "HTML5ROCKS");
var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);
letters[4].attr({ fill: "orange" });
for (var i = 5; i < letters.length; i++) {
letters[i].attr({ fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D" });
}
});
</script>
</body>
</html>
Второй текст HTML5ROCKS окрашен, как и ожидалось (как показано на исходной странице учебника).