Mapbox自定义字体

创建字体格式pbf

字体文件（ttf/otf）一般比较大（一般在10M左右，至少设计师给我的字体文件就是这般大），在网页中加载比较耗时。

mapbox加载的字体是经过处理的，加工成pbf格式。pbf格式文件是基于Google的Protocol Buffer协议进行组织，是一种二进制文件。Mapbox的矢量瓦片、字体都是采用这种数据结构进行存储、压缩的。

Mapbox官方提供了两种方式帮助我们字体转换成pbf格式（即ttf、otf => pbf）

1. 开源工具 fontnik
2. 在线服务 Fonts API

这两种方式都挺简单的，前者可用于本地化部署，后者是提供字体管理。

样式文件设置

在样式文件中的glyphs中设置成相应的字体服务，本地的字体地址如下：

http://localhost:3000/fonts/{fontstack}/{range}.pbf

如果使用在线的字体服务地址，则需要加上access_token，只设置mapboxgl.access_token无效。如下：

https://api.mapbox.com/fonts/v1/dahong/{fontstack}/{range}.pbf?access_token=YOUR_MAPBOX_ACCESS_TOKEN

dahong是我的在mapbox官网上的用户名（username）

本地字体设置

在样式文件中设置后，地图中的并没有生效，查看控制台也确实请求到了字体（但不多）。我们发现地图上的字母、数字已经变成了自定义字体，但汉字没有。

mapboxgl对CJK和部分东亚的字体做了限制。他们认为这些地方的字体文件太大，加载耗时，默认使用“本地”字体。就是使用电脑本身或者手机本身的字体，就不用再去请求了。为了避免这种情况，我们需要在初始化map对象时，设置 localIdeographFontFamily 属性为空字符串""。不使用本地字体，就用自定义字体！