RaphaelJS中的字体真棒图标

问题描述

我正在尝试向Font Awesome中的画布添加RaphaelJS图标。

这是我到目前为止的内容：jsFiddle

canvas = Raphael('my-canvas',100,100);
var myIcon = canvas.text(50,50,'\uf056');
myIcon.attr('font-size',40);
myIcon.attr('fill','#000');
myIcon.attr('font-weight','300');
myIcon.attr('font-family','FontAwesome');

（我的代码基于以下问题：Font awesome with raphael js）

图标以“纯色”样式显示，但是我想将样式更改为“常规”或“浅色”。我尝试按照here所述将font-weight设置为300，将font-amily设置为“ Font Awesome 5 Pro”。

我还在本地开发环境中使用有效的Font Awesome Pro许可进行了尝试，结果相同。但是，我确实发现，如果我禁用了对Font Awesome 4的旧版支持，这些图标将不再显示。也许Awesome 5不再支持此解决方案？

任何朝着正确方向的提示或指示将不胜感激！

解决方法

根据this，必须将字体设置为“ Font Awesome 5 Pro”，才能将图标显示为“浅色”或“常规”。但是我的问题是让Raphael JS使用正确的字体。设置除“ FontAwesome”以外的任何字体系列只会导致显示正方形。

解决方案非常简单。只需在字体字符串中添加引号，图标就会正确显示！

myIcon.attr('font-family',"'Font Awesome 5 Pro'");