问题
I need to build an interactive map of South Africa so that when someone clicks on the provinces the right Google Map displays. I eventually opted to convert a vector based map of South African provinces I have to fonts/glyphs. This worked super well and you can view them here.
http://vane.co.za/files/south-african-province-glyphs/demo.html
EDIT: I've added a jsFiddle here for the map
The map is one whole map of South Africa with its different provinces so what I did was take each province from within illustrator and copy them into a new document. I then clipped the white board to fit exactly around the edges ensuring that every SVG file I saved was exact.
I saved every file as an SVG and imported it to IcoMoon which then converted it to a font for me. So far so good.
I would assume that that when I import these fonts without a font size, they should all render in their original size so that I can piece together the different province maps into one whole South african map but this is not the case.
I thought that giving them an equal EM sizes will scale them proportionally so that each one is it's own correct size but this has not worked either.
Is there a way to match these maps up so that they all fit perfectly back to the country map again?
I hope this makes sense?
EDIT:
I've gone back to http://icomoon.io where I generated the glyphs and figured out that they are being created at 16px X 16px. However, even if I scale them by px according to the size I want them, they still do not slot into one another correctly.
In Firebug I am nulling all the font sizes and using the layout inspector. These are all the width sizes I managed to get; the heights are all 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
The example below is my attempt at scaling the glyphs up manually but the smaller provinces can be seen in the top left.
EDIT: These are the actual sizes they need to be in order for them to puzzle together nicely inside that white block:
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
回答1:
You clipped the art boards of each shape to match the shape itself. This means you lose all relative sizing between the shapes once you turn them into a font glyph. A tiny little province will be as tall as the largest one if you render your glyphs in the same font-size.
The easiest solution is to not clip artboard the shapes. That way you preserve the scale of each glyph:
Smaller provinces will have a lot of empty space inside the glyph, but they'll all overlap nicely.
来源：https://stackoverflow.com/questions/21348355/province-glyph-font-sizes-not-lining-up-interactive-map-of-south-africa