省字形/字體大小不排隊 - 南非互動地圖

Question

我需要建立一個交互map of South Africa，這樣當有人clicks on the provinces正確的Google Map顯示。我最終選擇將基於矢量的南非省份地圖轉換爲字體/字形。這工作得非常好，你可以在這裏查看它們。

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

編輯：我添加了一個jsFiddle here for the map

地圖是南非的一個全地圖以其不同省份所以我所做的就是把每省從插畫中，並將它們複製成新文件。然後，我裁剪白板以準確地貼合邊緣，確保每個我保存的SVG文件都是精確的。

我將每個文件保存爲SVG並將其導入到IcoMoon，然後將它轉換爲我的字體。到現在爲止還挺好。

我會假設，當我導入這些字體時沒有字體大小，它們應該都以原始大小渲染，這樣我就可以將不同省份的地圖拼湊成一幅南非地圖，但事實並非如此。

我認爲給他們一個相同的EM尺寸會按比例縮放它們，這樣每一個都是它自己的正確尺寸，但這也沒有奏效。

有沒有辦法將這些地圖匹配起來，以便它們都能夠完美地回到國家地圖上？

我希望這有道理嗎？

編輯：

我已經回到http://icomoon.io，我產生的字形和想通了，他們是在16像素X 16像素創建。但是，即使我按照我想要的大小按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中呈現您的字形，一個小小的省份將會與最大的省份一樣高。

最簡單的解決方案是不要剪貼畫板的形狀。這樣，你保留每個字形的規模：

較小的省份都會有很多的字形內空的空間，但他們都會很好地重疊。