如何解决RaphaelJS中的字体真棒图标
我正在尝试向Font Awesome中的画布添加RaphaelJS图标。
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'");
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。