如何在未安装字体的设备上显示Fontawesome图标?
Fontawesome字体图标具有轻量和友好的特性,非常适合在Axure原型设计中进行应用,能很好地表达页面需求,又不会干扰UI人员的设计工作。
正常情况下,我们在电脑上已经安装了 Fontawesome 字体文件,在预览Axure原型HTML文件时,字体图标是显示正常的;如果将输出的原型HTML发布到网上,或在其它未安装字体文件的电脑上演示时,图标就会显示为空或乱码,这种情况怎么解决呢?
我们只需要在Axure中设置一下Web字体选项即可解决这个问题。
方法一:有联网时
在Axure的发布设置中,在Web字体选项中添加外部Web字体CSS链接。添加方式:发布_生成HTML文件_Web字体,勾选“包含Web字体”,点击+图标,设置名称(可随意),然后将CSS链接地址添加到URL中,再生成HTML文件即可。
下面分别是Axure 8和9设置WEB字体选项的截图。
CSS链接地址:https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css
方法二:未联网或未安装字体
方法一是基于互联网来实现,那么如果是未联网的设备,又怎么办呢?
我们可以在发布设置中添加本地Web字体CSS链接,这种方法是使用相对路径调用的字体资源。
首先添加CSS链接,添加方式:发布_生成HTML文件_Web字体,勾选“包含Web字体”,点击加号图标,设置名称(可随意),CSS链接地址设置为【resources\Font-Awesome\css\all.css】,生成HTML文件。
然后将包含CSS和字体的【Font-Awesome】文件夹,整个拷贝到【原型HTML目录\resources\】中,如下图。
CSS文件中包含字体文件的相对路径,因此该路径必须与字体文件的存储路径一致,才能正常显示字体图标(如下图所示)。
PS:Unicons字体图标的使用方法亦可以参考本文。
推荐Axure字体图标库
Unicons线形字体图标元件库 https://blog.csdn.net/congzi530/article/details/118569808
FontAwesome v5.15.3 字体图标元件库 https://blog.csdn.net/congzi530/article/details/111060099