CentOS7.2系统下使用node-fontnik将tff字体转pbf字体

 由于Mapbox GL JS使用的SDF的方式绘制字体，即需要把普通的ttf格式转换成pbf字体格式。Mapbox团队开源了一个工具，将普通的ttf和otf字体转换成Mapbox GL渲染需要的字体的工具：node-fontnik。

node-fontnik简介（https://github.com/mapbox/node-fontnik/）：

node-fontnik 是mapbox开源的将字体转换为 SDFs (signed distance fields) 格式的工具. SDFs使用protobuf定义。

node-fontnik是基于nodejs开发的，因此必须要安装node ， node.js版本最好为 v6.x ，其他版本安装时可能会出错。

下图是node-fontnik官网上给的安装要求：

安装环境配置

由于node-fontnik要求的是OS X系统或者是Linux系统，因为需要在我们常用的Windows系统上安装虚拟机，用以安装这两者中其一的系统。常用VMware来安装配置虚拟机。

CentOS7.2下载链接：http://www.xitongzhijia.net/linux/201603/69275.html

VMware软件中安装虚拟机教程链接：http://www.linuxidc.com/Linux/2014-10/108013.html

Linux系统中安装nodejs：

安装之前:

在编译我们的代码之前，需要在CentOS机器上安装一些软件包，这样可以我们编译。所以在你打开的的终端中，输入以下内容。

sudo yum install gcc gcc-c++

等待这些软件包的安装和运行

从源码安装Node.js

首先我们要从源码安装Node.js。在你的CentOS机器上打开一个新的终端标签并运行以下命令 用来下载需要使用的安装文件。

（笔者以6.3.0为例）

从nodejs官网上下载软件包

wget http://nodejs.org/dist/v6.3.0/node-v6.3.0.tar.gz

然后提取tar文件

tar xvf node-v6.3.0.tar.gz

更改工作目录节点

cd node-v6.3.0

用以下命令来配置和编译。

./configure
make

以上会需要一些时间来完成，别担心因为编译将需要一段时间。然后使用下面的命令来在你的系统上安装Node.js。

sudo make install

安装完成之后，你就可以开始使用Node.js了。并为确保安装的版本正确，你可以使用以下命令检查。

node --version

当运行上述命令时，我得到以下信息。

v6.3.0

安装Python2.7

配置环境中其实还要求安装Python2.7版本

在笔者所使用的CentOS7.2中自带了Python2.7.5版本

可以输入一下命令查看自己系统中Python的版本

python --version

在笔者的系统中，我得到一下信息。

v2.7.5

笔者在这儿提醒一点，如果是自己安装Python，记着配置环境变量。

安装Mapbox GL

命令行中输入npm install --save mapbox-gl

等待安装即可

使用node-fontnik转换字体！

打开终端

输入以下命令，转换工作目录

cd node-fontnik

运行以下命令

npm install

等待安装完成，即可开始转换工作

首先，把要转换的字体放入node-fontnik文件夹下fonts的一个文件中。如下图

然后写一个test.js文件在文件夹fontnik里

内容如下（来自猿基地）：

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("./fonts/FZZHJ/.TTF", "./zt/FZZHJ/"); 

convert("./fonts/zt/FZHCJ.ttf", "./zt/FZHCJ/");
convert("./fonts/zt/HYXLSJ.ttf", "./zt/HYXLSJ/"); 
convert("./fonts/zt/HYZSF.ttf", "./zt/HYZSF/");  
convert("./fonts/zt/arial unicode ms.ttf", "./zt/arial unicode ms/");  
convert("./fonts/zt/times.ttf", "./zt/times/"); 

代码运行结果，看到done后即可去相应文件夹下查看输出结果

输出结果

大功告成！

test.js代码中需要注意两个问题：

1.所有输入输出的文件夹必须提前自己创建；

2.注意区分TTF和ttf的大小写问题，依照输入文件来写。