Css 省份字形/字体大小未对齐-南非交互式地图

我需要建立一个互动的，这样当有人正确的谷歌地图显示。我最终选择将南非省份的矢量地图转换为字体/字形。这非常有效，你可以在这里查看它们

编辑：我添加了一个

这张地图是一张完整的南非地图，上面有不同的省份，所以我所做的就是从illustrator中选取每个省份，并将它们复制到一个新的文档中。然后，我裁剪白板，使其完全适合边缘，确保保存的每个SVG文件都是准确的

我将每个文件保存为SVG，并将其导入IcoMoon，然后将其转换为字体。到目前为止还不错

我会假设，当我导入这些没有字体大小的字体时，它们都应该以其原始大小呈现，以便我可以将不同的省地图拼合成一个完整的南非地图，但事实并非如此

我认为给他们一个相等的EM尺寸会按比例缩放，这样每个都是它自己的正确尺寸，但这也不起作用

有没有办法将这些地图匹配起来，使它们再次完全符合国家地图

我希望这有意义

编辑：

我回到了生成glyph的地方，发现它们是以16px X 16px的速度创建的。然而，即使我根据我想要的大小按px缩放它们，它们仍然不能正确地相互插入

在Firebug中，我将清空所有字体大小并使用布局检查器。这些都是我设法得到的宽度尺寸；高度都是16像素

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

---

您剪裁了每个形状的艺术板，以匹配形状本身。这意味着一旦将形状转换为字体图示符，将丢失形状之间的所有相对大小。如果您以相同的

字体大小渲染glyph，那么一个小省将与最大省一样高

最简单的解决方案是不要将artboard剪裁到形状上。这样可以保留每个图示符的比例：


较小的省份在标志符号中会有很多空白，但它们会很好地重叠。
谢谢Roel。让我明白这一点。当您将这些图示符导入icomoon.io时，是否也会导入空白？很难说，因为最终的产品，字形的宽度都在16px左右？是的，空白将被保留。如果您以16px打印这些示例“省1”和“省2”图示符，第一个将是一个相当小的点（大约5px高），第二个将是整个16px高。你可以在Icomoon中用编辑工具（铅笔）打开图示符进行双重检查。我已将其标记为正确，然后放大了图标，以查看是否可以更紧密地匹配它们，但它们似乎没有完全对齐。我们正在忙着更新小提琴来告诉你我的意思。最后，一切似乎都很顺利，但我似乎有一个问题，东开普略微重叠夸祖鲁-纳塔利恐怕这就是字体符号滚动的方式。这些形状彼此接触/重叠的方式取决于浏览器/OS渲染引擎的工作方式、应用了何种（亚）像素平滑等。这决定了外边缘的绘制方式：这些像素是几乎不透明还是几乎透明？后者将导致背景色渗入。您可以尝试使用特定于浏览器的CSS，如
-webkit字体平滑：抗锯齿
，在导出形状之前稍微展开形状，或者使用SVG或普通的旧位图图像。