EyesAsia 字体 — 用字母来画中国地图

分享给朋友:

两年前,ProPublica推出了StateFace字体,其中包含了美国各州形状,方便了设计师们把地图作为设计元素纳入数据可视化、信息图、应用中。

Screen Shot 2014-07-06 at 5.03.57 PM

受ProPublica启发,我在业余时间采用类似的方法设计了EyesAsia字体,只是这次的坐标变成了东亚。EyesAsia包括了东亚的国家和地区,如日本、韩国、朝鲜、蒙古;中国部分,在经过反复试验后,最后采用了国家测绘地理信息局提供的400万政区版eps文件作为原始素材,并顺手加了五个湖泊(最大咸水湖青海湖,及四大淡水湖)。

Screen Shot 2014-07-06 at 6.49.07 PM

东亚的国家和地区中文键盘地图

目前是1.1版,所有素材都在我的Github上可供下载:https://github.com/HaoyunS/EyesAsia  中文键盘地图及使用demo请戳这里。

使用指南

一、下载:

Screen Shot 2014-07-06 at 5.15.08 PM

Github页面右侧栏Download ZIP按钮,点击可以直接下载压缩包。

二、如果想安装在本地

font文件夹下有EyesAsia-Regular.otf,本地安装字体后即可在Illustrator、PhotoShop等软件中使用。

三、在网页中使用

找到font/webfont文件夹,将其中所有文件上传到你的server:

  • eyesasia-regular-webfont.eot
  • eyesasia-regular-webfont.woff
  • eyesasia-regular-webfont.ttf
  • eyesasia-regular-webfont.svg

在你的CSS stylesheet中包括以下代码:

具体哪个字母对应哪个省份或国家,可参照Github页面上的说明

另外,reference文件夹下也包括了EyesAsia.json文件,方便程序员使用。

四、CSS替代

在reference文件夹中,还有一个eyesasia.css文件,其中设定了CSS class,方便在网页中替代这些地图元素。把这份stylesheet包括在网页的<head>部分就可以使用了,具体说明如下。(实际效果请戳这里

例1:替换

原理:<span class="eyesasia eyesasia-replace eyesasia-{地名}">{替换文字}</span>
例子:代码 <span class="eyesasia eyesasia-replace eyesasia-shanghai">上海</span>
效果:不会显示文字,只有上海市地图形状

例2:前置(去除class中的eyesasia-replace)

原理:<span class="eyesasia eyesasia-{地名}">{后面的文字}</span>
例子:代码 <span class="eyesasia eyesasia-shanghai">上海</span>
效果: 显示上海形状+“上海”

[结尾彩蛋]

出于投影参数(projection)不同的考量,有一个字母代表的地理形状并没有在键盘地图中给出,不过用起来也很方便,你发现是哪个了吗?^^

———————– 版权信息 ———————–

EyesAsia为开源项目,作者苏颢云,在说明来源及包含原始版权信息文件的前提下使用和改动不构成侵权,详细说明如下:

作者简介

苏颢云

关注开放数据、可视化,数据新闻记者。