如何在Mapbox中使用浏览器或系统默认字体？

嘿，我帮你搞定这个离线场景下的Mapbox文字图层问题！

首先，咱们得搞清楚为啥会报这个错：Mapbox GL JS渲染文字的时候，必须依赖**glyphs（字形文件）**来生成文字，不管是在线还是离线环境。默认情况下它会用Mapbox的在线glyphs服务，但你是离线运行，没法访问在线资源，所以必须配置本地的glyphs才行——而且没法直接用浏览器/系统默认字体跳过这一步，因为Mapbox的渲染机制不支持直接调用系统字体渲染文字，必须先把字体转换成它需要的glyphs格式。

下面是具体的解决步骤：

1. 把系统字体转换成Mapbox兼容的glyphs格式 #

你需要用工具把本地系统字体（比如Arial、Roboto这类常用字体）转换成Mapbox的glyphs文件格式。推荐用@mapbox/glyphs-cli这个工具，操作很简单：

• 先安装工具：npm install -g @mapbox/glyphs-cli
• 找到你要使用的系统字体文件（比如Windows上的Arial.ttf，Mac上的/Library/Fonts/Arial.ttf），然后运行命令生成glyphs：

  glyphs generate /path/to/your/font.ttf -o ./local-glyphs
  

  这个命令会在local-glyphs文件夹里生成按字体和字符范围划分的.pbf格式glyphs文件。

2. 在Mapbox样式中配置本地glyphs路径 #

接下来，你需要在初始化Map的时候，给样式添加glyphs属性，指向你刚才生成的本地glyphs文件夹，同时在文字图层里指定对应的字体名称：

// 初始化Map的时候直接定义样式（或者在加载样式后修改）
const map = new mapboxgl.Map({
  container: 'your-map-container',
  style: {
    version: 8,
    sources: {
      [this.sourceId]: {
        // 你的数据源配置，比如geojson类型
        type: 'geojson',
        data: yourOfflineData
      }
    },
    // 配置本地glyphs路径，{fontstack}和{range}是Mapbox需要的占位符
    glyphs: './local-glyphs/{fontstack}/{range}.pbf',
    layers: [
      // 你的点图层
      { 
        id: this.layerPointId, 
        type: "circle", 
        source: this.sourceId, 
        paint: { 
          "circle-color": this.color, 
          "circle-radius": 4 
        } 
      },
      // 文字图层，注意text-font要和你转换的字体名称一致
      { 
        id: this.layerTextId, 
        type: "symbol", 
        source: this.sourceId, 
        layout: { 
          "text-field": "Hello world", 
          "text-size": 12,
          // 比如你用的是Arial Regular，就写这个名称
          "text-font": ["Arial Regular"]
        } 
      }
    ]
  },
  // 其他Map配置...
});

注意事项 #

• 字体名称必须准确：text-font里的名称要和你转换的字体的正式名称一致，比如如果是Roboto Bold，就要写["Roboto Bold"]，不然Mapbox找不到对应的glyphs文件。
• 确保glyphs路径正确：如果你的HTML文件和local-glyphs文件夹在同一目录，用相对路径就可以；如果不在，要调整路径确保能访问到。

这样配置之后，你的离线POC就能正常渲染“Hello world”文字了，完全不需要依赖在线资源！

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