Leaflet TimeDimension控件图标来源及加载位置技术问询

嘿，我来给你拆解清楚这个问题～

一、图标到底是什么来头？ #

这些前进、后退、播放按钮的图标，其实是Web字体图标——简单说就是把图标做成了字体文件，和我们平时用的宋体、微软雅黑一样是字体，但每个字符对应一个图标。这种方式比图片图标好用多了，能随便缩放、改颜色，还不用额外加载图片资源。

二、字体文件是在哪里加载的？ #

你去看leaflet.timedimension.control.css这个文件，里面肯定有一段@font-face的代码，就是用来加载这个自定义字体的。大概长这样：

@font-face {
    font-family: 'LeafletTimeDimensionIcons'; /* 名字可能类似这个 */
    src: url('fonts/leaflet-timedimension-icons.eot');
    src: url('fonts/leaflet-timedimension-icons.eot?#iefix') format('embedded-opentype'),
         url('fonts/leaflet-timedimension-icons.woff') format('woff'),
         url('fonts/leaflet-timedimension-icons.ttf') format('truetype'),
         url('fonts/leaflet-timedimension-icons.svg#LeafletTimeDimensionIcons') format('svg');
    font-weight: normal;
    font-style: normal;
}

这段代码就是告诉浏览器：去指定路径加载这个字体文件，路径一般和CSS文件同目录下的fonts文件夹里，或者项目的资源目录里。

三、那些奇怪的Unicode字符（\e072、\e073）在哪里定义？ #

这些字符属于Unicode的私有使用区（PUA），这个区域的字符没有统一的标准，是字体设计师自己定义的——也就是说，这些字符和图标对应的关系，是在字体文件本身里绑定好的。

然后在CSS里，会给按钮元素设置font-family为这个自定义字体，再通过content属性把这些字符放进去，比如：

.leaflet-control-timedimension .leaflet-control-play:before {
    font-family: 'LeafletTimeDimensionIcons';
    content: "\e072"; /* 这个字符就对应播放图标 */
}

所以你看到的\e072、\e073，其实是字体文件里预先定义好的“图标代号”，CSS只是调用这些代号来显示对应的图标而已。

总结一下流程就是：

• 用CSS的@font-face引入自定义图标字体
• 给按钮指定这个字体
• 用PUA字符作为content，显示对应图标

内容的提问来源于stack exchange，提问作者lmocsi