省字形/字体大小不排队 - 南非互动地图 [英] Province glyph/font sizes not lining up - Interactive map of South Africa
问题描述
http://vane.co.za/files/south-african-province-glyphs/demo.html
编辑：我已经添加了 jsFiddle这里地图
这幅地图是南非及其不同省份的整体地图，所以我所做的是从插图画家的每个省份将它们复制到一个新的文件。然后裁剪白板，以确保每一个SVG文件保存准确。
我将每个文件都保存为SVG，并将其导入到IcoMoon中然后将其转换为我的字体。到目前为止这样好。
我会假设，当我导入这些字体没有字体大小，他们应该都在原始大小呈现，以便我可以拼凑不同的省份映射到一个整体的南非地图，但事实并非如此。我认为给他们一个相同的EM大小将按比例调整它们，以便每一个都是它的自己正确的大小，但这也没有奏效。
有没有办法匹配这些地图，以便他们都可以完全适合国家地图？
我希望这有道理吗？
编辑：
我已经回到了 http://icomoon.io ，在那里生成了字形和发现他们正在创建16px x 16px。但是，即使我按照我想要的大小按比例缩放它们，它们仍然没有正确插入到另一个。
在Firebug中，我将所有字体大小和使用布局检查员。这些都是我设法得到的宽度尺寸;
西北 - 22px
Limpopo - 24
Mpumalanga - 15px
夸祖鲁 - 纳塔尔省 - 13px
豪登省 - 15px
自由州 - 19px
东开普省 - 24px
西开普省 - 20px
北开普省 - 15px
下面的例子是我手动缩放字形的尝试，但是可以看到较小的省份
编辑：
这些是他们需要的实际大小，以便让他们很好地拼凑在一起那白块：
西北 - 75.684px
林波波 - 73.217px
姆普马兰加 - 50.286px
夸祖鲁 - 纳塔尔 - 53.248px
豪登省 - 25.817px
自由州 - 72.984px
东开普省 - 99.397px
西开普省 - 84.725px
Northern-Cape - 120.514px
您剪下每个形状的艺术板以匹配形状本身。这意味着一旦将它们转换为字体字形，就会失去所有形状之间的相对大小。如果您使用相同的 font-size ，那么一个小小的省份将会与最大的省份一样高。
<最简单的解决方案是不剪切画板的形状。这样你就保留了每个字形的比例： b
$ b
更小的省份在字形里面会有很多空的空间，但是它们都会很好地重叠。
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
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.
这篇关于省字形/字体大小不排队 - 南非互动地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
