本地文字切片 - mapbox 本地化

发表于 更新于 分类于

本地文字切片

mapbox 地图字体通常使用 mapbox 线上 glyphs 文件. 字体本地化需要将使用的字体提取至本地 glyphs 文件中, 对应的, 需要修改为本地的地址："glyphs": "./font/{fontstack}/{range}.pbf".

而 fontstack 和 range 会被具体的字体类型和这个字在字体中所处的实际范围给替换了. mapbox 团队开源了一个工具, 将普通的 ttf 和 otf 字体转换成 mapbox GL 渲染需要的字体的工具：node-fontnik.

mapbox/node-fontnik 工具使用介绍

安装

  1. 下载源码node-fontnik-release
1
wget https://github.com/mapbox/node-fontnik/archive/v0.5.0.tar.gz
  1. 安装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#解压缩
$ tar -xzf v0.5.0.tar.gz
$ cd node-fontnik-0.5.0
#安装库文件
#这个必须执行到, 未执行需要卸载重装, 需要curl
$ apt-get install curl
#一定要使用全局代理运行
#一定要使用全局代理运行
#一定要使用全局代理运行
$ ./install_mason.sh
#安装node相关
$ npm install
#编译
$ make

使用

  1. 准备需要转换字体的 ttf 文件, 这里使用微软雅黑 msyh.ttf
  2. 编写需要转换使用的 js convert.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var fontnik = require(".");
var fs = require("fs");
var path = require("path");

var convert = function(fileName, outputDir) {
  var font = fs.readFileSync(path.resolve(__dirname + "/" + fileName));
  output2pbf(font, 0, 255, outputDir);
};

function output2pbf(font, start, end, outputDir) {
  if (start > 65535) {
    console.log("done!");
    return;
  }
  fontnik.range({ font: font, start: start, end: end }, function(err, res) {
    var outputFilePath = path.resolve(
      __dirname + "/" + outputDir + "/" + start + "-" + end + ".pbf"
    );
    fs.writeFile(outputFilePath, res, function(err) {
      if (err) {
        console.error(err);
      } else {
        output2pbf(font, end + 1, end + 1 + 255, outputDir);
      }
    });
  });
}

convert("./msyh.ttf", "./msyh");
  1. 将 msyh.ttf 和 convert.js 复制到 node-fontnik-0.5.0 路径下
  2. 运行 js 转换文字, 出现 done! 则为转换成功.
1
$ node convert.js
  1. 转换结果为 XX-YY.pbf 的字体文件夹