问题
在Windows平台下使用Axure画原型的时候,其默认字体是Arial,在Axure软件中我们看到的Arial字体是这样的
但是在浏览器中预览原型的时候,我们会发现,在不同的浏览器下看到的字体效果是不一样的。
在IE、搜狗、百度、猎豹浏览器中的效果是这样的
很显然这不是我们想要的效果。
而在Edge、Google Chrome、Firefox、Opera浏览器中的效果是这样的
这才是我们期望的效果,和Axure软件中的一模一样。
虽然我们可以在Axure软件中将字体调整为“微软雅黑”等我们想要的字体样式,但是每个元件都要修改一次字体,实在麻烦,另外即使是“微软雅黑”,在不同的平台的显示效果可能也不尽相同,那么要解决这个问题,除了修改元件本身的字体之外,还有一个办法,就是设置字体映射。通过字体映射,可以将一种字体映射为多种字体,从而也解决了跨平台字体失效的问题。
解决
下面我们以将“Arial”字体映射为“微软雅黑”来举例。
在Axure软件中,点击“发布”,然后在下拉菜单中点击“预览选项”
在弹出的预览选项对话框点击“配置”
然后在弹出的生成HTML对话框中选择“字体映射”,点击“+”图标添加映射关系,左边的字体选择“Arial”(默认应该就是Arial),右边的字体系列录入“微软雅黑”(不带引号),因为右边是字体系列,所以可以录入多个字体名称,中间用英文逗号隔开即可。
这时候我们在预览一下原型,就发现原来把Arial字体显示为上面第一种情况的那些浏览器,可以将字体显示为“微软雅黑”了。
谢谢!这个方法太有用了,之前画原型预览出来的效果都超级难看。。。。这下解决了!