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

问题

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

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

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

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

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

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

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

解决

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

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

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

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

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