【技巧】解决Axure原型在不同浏览器中预览时的字体问题

问题

在Windows平台下使用Axure画原型的时候,其默认字体是Arial,在Axure软件中我们看到的Arial字体是这样的

但是在浏览器中预览原型的时候,我们会发现,在不同的浏览器下看到的字体效果是不一样的。

在IE、搜狗、百度、猎豹浏览器中的效果是这样的

很显然这不是我们想要的效果。

而在Edge、Google Chrome、Firefox、Opera浏览器中的效果是这样的

这才是我们期望的效果,和Axure软件中的一模一样。

虽然我们可以在Axure软件中将字体调整为“微软雅黑”等我们想要的字体样式,但是每个元件都要修改一次字体,实在麻烦,另外即使是“微软雅黑”,在不同的平台的显示效果可能也不尽相同,那么要解决这个问题,除了修改元件本身的字体之外,还有一个办法,就是设置字体映射。通过字体映射,可以将一种字体映射为多种字体,从而也解决了跨平台字体失效的问题。

解决

下面我们以将“Arial”字体映射为“微软雅黑”来举例。

在Axure软件中,点击“发布”,然后在下拉菜单中点击“预览选项”

在弹出的预览选项对话框点击“配置”

然后在弹出的生成HTML对话框中选择“字体映射”,点击“+”图标添加映射关系,左边的字体选择“Arial”(默认应该就是Arial),右边的字体系列录入“微软雅黑”(不带引号),因为右边是字体系列,所以可以录入多个字体名称,中间用英文逗号隔开即可。

这时候我们在预览一下原型,就发现原来把Arial字体显示为上面第一种情况的那些浏览器,可以将字体显示为“微软雅黑”了。

评论(1)

发表评论

电子邮件地址不会被公开。 必填项已用*标注