mapbox加载自定义字体

一、创建字体格式pbf

字体文件（ttf/otf）一般比较大，在网页中加载比较耗时。mapbox加载的字体是经过处理的pbf格式。pbf格式文件是基于Google的Protocol Buffer协议进行组织，是一种二进制文件。Mapbox的矢量瓦片、字体都是采用这种数据结构进行存储、压缩的。

详细步骤，参考大佬文章：制作.pbf字体

二、样式中修改

map.addLayer({
  id: 'cluster-count',
  type: 'symbol',
  source: 'earthquakes',
  filter: ['has', 'point_count'],
  layout: {
    "text-field": "这就是我想要的字体啦",
    'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
    'text-size': 18
  }
});

其中，“text-font”就是我们加载的字体名称，但是发现网页加载的中文字体并不如人所愿，还是默认的字体，这个时候让我们打开官方文档，一探究竟。mapbox 官方文档

大致意思就是：mapbox为了避免带宽密集型字形服务器请求，所以定义了一个字体库，覆盖“中日韩统一象形文字”。localIdeographFontFamily的默认值为'sans-serif'，我们只需在地图初始化的时候将此选项的值改为空，即可正常加载我们的字体库字体啦

map = new mapboxgl.Map({
  container: "mapContainer",
  style: style,
  localIdeographFontFamily:''
});