省字形/字体大小没有排队 - 南非的交互式地图

Question

我需要构建一个交互式map of South Africa，以便当有人clicks on the provinces显示正确的Google地图时。我最终选择将我所拥有的南非省份的矢量图转换为字体/字形。这非常有效，你可以在这里查看。

http://vane.co.za/files/south-african-province-glyphs/demo.html

编辑：我添加了jsFiddle here for the map

该地图是南非及其不同省份的整个地图，所以我所做的是从插图画家中取出每个省份并将其复制到新文件中。然后我剪切了白板以恰好适合边缘，确保我保存的每个SVG文件都是精确的。

我将每个文件保存为SVG并将其导入IcoMoon，然后将其转换为我的字体。到目前为止一切都很好。

我认为当我导入这些没有字体大小的字体时，它们都应该以原始大小渲染，这样我就可以将不同的省份地图拼凑成一张完整的南非地图，但事实并非如此。 / p>

我认为给它们一个相等的EM大小会按比例缩放它们，这样每个都是它自己的正确尺寸，但这也没有用。

有没有办法匹配这些地图，以便它们能够完全重新回到国家地图？

我希望这有道理吗？

编辑：

我已经回到http://icomoon.io，我在那里生成了字形，并发现它们是在16px X 16px下创建的。但是，即使我根据我想要的尺寸按照px缩放它们，它们仍然不能正确地插入另一个。

在Firebug中我将所有字体大小归零并使用布局检查器。这些都是我设法得到的宽度尺寸;高度都是16px。

North-West     - 22px 
Limpopo        - 24
Mpumalanga     - 15px
KwaZulu-Natal  - 13px
Gauteng        - 15px
Free-State     - 19px
Eastern-Cape   - 24px
Western-Cape   - 20px
Northern-Cape  - 15px

以下示例是我尝试手动缩放字形，但左上角可以看到较小的省份。

修改 这些是他们需要的实际尺寸，以便他们在白色块内很好地拼图：

North-West     - 75.684px
Limpopo        - 73.217px
Mpumalanga     - 50.286px
KwaZulu-Natal  - 53.248px
Gauteng        - 25.817px
Free-State     - 72.984px
Eastern-Cape   - 99.397px
Western-Cape   - 84.725px
Northern-Cape  - 120.514px

Answer 1

您剪裁了每个形状的艺术板以匹配形状本身。这意味着一旦将形状转换为字体字形，就会丢失形状之间的所有相对大小。如果您将字形渲染为相同的font-size，那么一个小的省份将与最大的省一样高。

最简单的解决方案是不剪切画板的形状。这样就可以保留每个字形的比例：

较小的省份在字形内部会有很多空白区域，但它们都会很好地重叠。