mapbox/node-fontnik工具使用介绍
在Mapbox GL JS本地化实践文章中，有提到node-fontnik这个工具，用于把otf和ttf字体转换为Mapbox GL使用的protobuf格式的SDF字体。由于篇幅的问题，在那篇文章中，并没有详细介绍这个工具。但该工具对于字体的生成至关重要，所以还是需要详细说明一下。
字体加载约定
此处需要说明一点，Mapbox GL JS加载字体是采用的分段式加载，而不是整个字体库加载。假如是英文国家的字体，一次性加载整个字体库，也不会有多大，但如果是中文字体呢？微软雅黑字体都有10多M，一次性加载肯定会出现加载时间过长的问题。
具体如何分段加载？根据字符编码范围进行分段，Unicode字符采用2个字节编码，所以字符的编码的范围是[0, 65535]，Mapbox GL JS按照每段长度256的方式，平均分为若干段。注意，每一段字体请求的命名方式为start-end.pbf。比如第一段则是0-255.pbf，依次是256-511.pbf，512-767.pbf...。
工具使用
在了解上面的规则的情况下，就可以利用工具进行转换，需要说明的是，它是一个库，并不是直接可运行可执行程序。不能直接配置待转换的字体，输出转换结果。它只是提供了可供使用的接口，需要自己写代码来实现最后的转换。打开工具页面，里面有个API.md，列出了该工具提供的可用接口。
使用该库之前，按照readme的说明，在对应环境上安装好。最后编写代码完成最后一步的转换。此处贴出我编写的转换代码my_test.js ：
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); } }); }); } // 下面是需要转换的字体，和转换后pbf存放路径 convert("./fonts/NotoSansHans-Regular.otf", "./siyuan-pbf/Noto Sans Hans Regular/"); convert("./fonts/NotoSansHans-Black.otf", "./siyuan-pbf/Noto Sans Hans Black/"); convert("./fonts/NotoSansHans-Bold.otf", "./siyuan-pbf/Noto Sans Hans Bold/"); convert("./fonts/NotoSansHans-DemiLight.otf", "./siyuan-pbf/Noto Sans Hans DemiLight/"); convert("./fonts/NotoSansHans-Light.otf", "./siyuan-pbf/Noto Sans Hans Light/"); convert("./fonts/NotoSansHans-Medium.otf", "./siyuan-pbf/Noto Sans Hans Medium/"); convert("./fonts/NotoSansHans-Thin-Windows.otf", "./siyuan-pbf/Noto Sans Hans Thin Windows/"); convert("./fonts/Microsoft-YaHei.ttf", "./yahei-pbf/Microsoft YaHei/");
convert("./fonts/open-sans/OpenSans-Regular.ttf", "./lgl/open sans regular/");
convert("./fonts/Alegreya/Alegreya-Black.ttf", "./lgl/Alegreya-Black/");
convert("./fonts/Alegreya/Alegreya-BlackItalic.ttf", "./lgl/Alegreya-BlackItalic/");
convert("./fonts/Alegreya/Alegreya-Bold.ttf", "./lgl/Alegreya-Bold/");
convert("./fonts/Alegreya/Alegreya-BoldItalic.ttf", "./lgl/Alegreya-BoldItalic/");
convert("./fonts/Alegreya/Alegreya-ExtraBold.ttf", "./lgl/Alegreya-ExtraBold/");
convert("./fonts/Alegreya/Alegreya-ExtraBoldItalic.ttf", "./lgl/Alegreya-ExtraBoldItalic/");
convert("./fonts/Alegreya/Alegreya-Italic.ttf", "./lgl/Alegreya-Italic/");
convert("./fonts/Alegreya/Alegreya-Medium.ttf", "./lgl/Alegreya-Medium/");
convert("./fonts/Alegreya/Alegreya-MediumItalic.ttf", "./lgl/Alegreya-MediumItalic/");
convert("./fonts/Alegreya/Alegreya-Regular.ttf", "./lgl/Alegreya-Regular/");
convert("./fonts/Cairo/Cairo-Black.ttf", "./lgl/Cairo-Black/");
convert("./fonts/Cairo/Cairo-Bold.ttf", "./lgl/Cairo-Bold/");
convert("./fonts/Cairo/Cairo-ExtraLight.ttf", "./lgl/Cairo-ExtraLight/");
convert("./fonts/Cairo/Cairo-Light.ttf", "./lgl/Cairo-Light/");
convert("./fonts/Cairo/Cairo-Regular.ttf", "./lgl/Cairo-Regular/");
convert("./fonts/Cairo/Cairo-SemiBold.ttf", "./lgl/Cairo-SemiBold/");
convert("./fonts/Lato/Lato-Black.ttf", "./lgl/Lato-Black/");
convert("./fonts/Lato/Lato-BlackItalic.ttf", "./lgl/Lato-BlackItalic/");
convert("./fonts/Lato/Lato-Bold.ttf", "./lgl/Lato-Bold/");
convert("./fonts/Lato/Lato-BoldItalic.ttf", "./lgl/Lato-BoldItalic/");
convert("./fonts/Lato/Lato-Hairline.ttf", "./lgl/Lato-Hairline/");
convert("./fonts/Lato/Lato-HairlineItalic.ttf", "./lgl/Lato-HairlineItalic/");
convert("./fonts/Lato/Lato-Italic.ttf", "./lgl/Lato-Italic/");
convert("./fonts/Lato/Lato-Light.ttf", "./lgl/Lato-Light/");
convert("./fonts/Lato/Lato-LightItalic.ttf", "./lgl/Lato-LightItalic/");
convert("./fonts/Lato/Lato-Regular.ttf", "./lgl/Lato-Regular/");
convert("./fonts/Lora/Lora-Bold.ttf", "./lgl/Lora-Bold/");
convert("./fonts/Lora/Lora-BoldItalic.ttf", "./lgl/Lora-BoldItalic/");
convert("./fonts/Lora/Lora-Italic.ttf", "./lgl/Lora-Italic/");
convert("./fonts/Lora/Lora-Regular.ttf", "./lgl/Lora-Regular/");
convert("./fonts/Montserrat/Montserrat-Black.ttf", "./lgl/Montserrat-Black/");
convert("./fonts/Montserrat/Montserrat-BlackItalic.ttf", "./lgl/Montserrat-BlackItalic/");
convert("./fonts/Montserrat/Montserrat-Bold.ttf", "./lgl/Montserrat-Bold/");
convert("./fonts/Montserrat/Montserrat-BoldItalic.ttf", "./lgl/Montserrat-BoldItalic/");
convert("./fonts/Montserrat/Montserrat-ExtraBold.ttf", "./lgl/Montserrat-ExtraBold/");
convert("./fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf", "./lgl/Montserrat-ExtraBoldItalic/");
convert("./fonts/Montserrat/Montserrat-ExtraLight.ttf", "./lgl/Montserrat-ExtraLight/");
convert("./fonts/Montserrat/Montserrat-ExtraLightItalic.ttf", "./lgl/Montserrat-ExtraLightItalic/");
convert("./fonts/Montserrat/Montserrat-Italic.ttf", "./lgl/Montserrat-Italic/");
convert("./fonts/Montserrat/Montserrat-Light.ttf", "./lgl/Montserrat-Light/");
convert("./fonts/Montserrat/Montserrat-LightItalic.ttf", "./lgl/Montserrat-LightItalic/");
convert("./fonts/Montserrat/Montserrat-Medium.ttf", "./lgl/Montserrat-Medium/");
convert("./fonts/Montserrat/Montserrat-MediumItalic.ttf", "./lgl/Montserrat-MediumItalic/");
convert("./fonts/Montserrat/Montserrat-Regular.ttf", "./lgl/Montserrat-Regular/");
convert("./fonts/Montserrat/Montserrat-SemiBold.ttf", "./lgl/Montserrat-SemiBold/");
convert("./fonts/Montserrat/Montserrat-SemiBoldItalic.ttf", "./lgl/Montserrat-SemiBoldItalic/");
convert("./fonts/Montserrat/Montserrat-Thin.ttf", "./lgl/Montserrat-Thin/");
convert("./fonts/Montserrat/Montserrat-ThinItalic.ttf", "./lgl/Montserrat-ThinItalic/");
convert("./fonts/Noto_Sans/NotoSans-Bold.ttf", "./lgl/NotoSans-Bold/");
convert("./fonts/Noto_Sans/NotoSans-BoldItalic.ttf", "./lgl/NotoSans-BoldItalic/");
convert("./fonts/Noto_Sans/NotoSans-Italic.ttf", "./lgl/NotoSans-Italic/");
convert("./fonts/Noto_Sans/NotoSans-Regular.ttf", "./lgl/NotoSans-Regular/");
convert("./fonts/Open_Sans/OpenSans-Bold.ttf", "./lgl/OpenSans-Bold/");
convert("./fonts/Open_Sans/OpenSans-BoldItalic.ttf", "./lgl/OpenSans-BoldItalic/");
convert("./fonts/Open_Sans/OpenSans-ExtraBold.ttf", "./lgl/OpenSans-ExtraBold/");
convert("./fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf", "./lgl/OpenSans-ExtraBoldItalic/");
convert("./fonts/Open_Sans/OpenSans-Italic.ttf", "./lgl/OpenSans-Italic/");
convert("./fonts/Open_Sans/OpenSans-Light.ttf", "./lgl/OpenSans-Light/");
convert("./fonts/Open_Sans/OpenSans-LightItalic.ttf", "./lgl/OpenSans-LightItalic/");
convert("./fonts/Open_Sans/OpenSans-Regular.ttf", "./lgl/OpenSans-Regular/");
convert("./fonts/Open_Sans/OpenSans-SemiBold.ttf", "./lgl/OpenSans-SemiBold/");
convert("./fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf", "./lgl/OpenSans-SemiBoldItalic/");
convert("./fonts/Oxygen/Oxygen-Bold.ttf", "./lgl/Oxygen-Bold/");
convert("./fonts/Oxygen/Oxygen-Light.ttf", "./lgl/Oxygen-Light/");
convert("./fonts/Oxygen/Oxygen-Regular.ttf", "./lgl/Oxygen-Regular/");
convert("./fonts/Palanquin_Dark/PalanquinDark-Bold.ttf", "./lgl/PalanquinDark-Bold/");
convert("./fonts/Palanquin_Dark/PalanquinDark-Medium.ttf", "./lgl/PalanquinDark-Medium/");
convert("./fonts/Palanquin_Dark/PalanquinDark-Regular.ttf", "./lgl/PalanquinDark-Regular/");
convert("./fonts/Palanquin_Dark/PalanquinDark-SemiBold.ttf", "./lgl/PalanquinDark-SemiBold/");
convert("./fonts/Roboto/Roboto-Black.ttf", "./lgl/Roboto-Black/");
convert("./fonts/Roboto/Roboto-BlackItalic.ttf", "./lgl/Roboto-BlackItalic/");
convert("./fonts/Roboto/Roboto-Bold.ttf", "./lgl/Roboto-Bold/");
convert("./fonts/Roboto/Roboto-BoldItalic.ttf", "./lgl/Roboto-BoldItalic/");
convert("./fonts/Roboto/Roboto-Italic.ttf", "./lgl/Roboto-Italic/");
convert("./fonts/Roboto/Roboto-Light.ttf", "./lgl/Roboto-Light/");
convert("./fonts/Roboto/Roboto-LightItalic.ttf", "./lgl/Roboto-LightItalic/");
convert("./fonts/Roboto/Roboto-Medium.ttf", "./lgl/Roboto-Medium/");
convert("./fonts/Roboto/Roboto-MediumItalic.ttf", "./lgl/Roboto-MediumItalic/");
convert("./fonts/Roboto/Roboto-Regular.ttf", "./lgl/Roboto-Regular/");
convert("./fonts/Roboto/Roboto-Thin.ttf", "./lgl/Roboto-Thin/");
convert("./fonts/Roboto/Roboto-ThinItalic.ttf", "./lgl/Roboto-ThinItalic/");
convert("./fonts/Teko/Teko-Bold.ttf", "./lgl/Teko-Bold/");
convert("./fonts/Teko/Teko-Light.ttf", "./lgl/Teko-Light/");
convert("./fonts/Teko/Teko-Medium.ttf", "./lgl/Teko-Medium/");
convert("./fonts/Teko/Teko-Regular.ttf", "./lgl/Teko-Regular/");
convert("./fonts/Teko/Teko-SemiBold.ttf", "./lgl/Teko-SemiBold/");
convert("./fonts/Ubuntu/Ubuntu-Bold.ttf", "./lgl/Ubuntu-Bold/");
convert("./fonts/Ubuntu/Ubuntu-BoldItalic.ttf", "./lgl/Ubuntu-BoldItalic/");
convert("./fonts/Ubuntu/Ubuntu-Italic.ttf", "./lgl/Ubuntu-Italic/");
convert("./fonts/Ubuntu/Ubuntu-Light.ttf", "./lgl/Ubuntu-Light/");
convert("./fonts/Ubuntu/Ubuntu-LightItalic.ttf", "./lgl/Ubuntu-LightItalic/");
convert("./fonts/Ubuntu/Ubuntu-Medium.ttf", "./lgl/Ubuntu-Medium/");
convert("./fonts/Ubuntu/Ubuntu-MediumItalic.ttf", "./lgl/Ubuntu-MediumItalic/");
convert("./fonts/Ubuntu/Ubuntu-Regular.ttf", "./lgl/Ubuntu-Regular/");
convert("./fonts/Rubik/Rubik-Black.ttf", "./lgl/Rubik-Black/");
convert("./fonts/Rubik/Rubik-BlackItalic.ttf", "./lgl/Rubik-BlackItalic/");
convert("./fonts/Rubik/Rubik-Bold.ttf", "./lgl/Rubik-Bold/");
convert("./fonts/Rubik/Rubik-BoldItalic.ttf", "./lgl/Rubik-BoldItalic/");
convert("./fonts/Rubik/Rubik-Italic.ttf", "./lgl/Rubik-Italic/");
convert("./fonts/Rubik/Rubik-Light.ttf", "./lgl/Rubik-Light/");
convert("./fonts/Rubik/Rubik-LightItalic.ttf", "./lgl/Rubik-LightItalic/");
convert("./fonts/Rubik/Rubik-Medium.ttf", "./lgl/Rubik-Medium/");
convert("./fonts/Rubik/Rubik-MediumItalic.ttf", "./lgl/Rubik-MediumItalic/");
convert("./fonts/Rubik/Rubik-Regular.ttf", "./lgl/Rubik-Regular/");
convert("./fonts/Nunito/Nunito-Black.ttf", "./lgl/Nunito-Black/");
convert("./fonts/Nunito/Nunito-BlackItalic.ttf", "./lgl/Nunito-BlackItalic/");
convert("./fonts/Nunito/Nunito-Bold.ttf", "./lgl/Nunito-Bold/");
convert("./fonts/Nunito/Nunito-BoldItalic.ttf", "./lgl/Nunito-BoldItalic/");
convert("./fonts/Nunito/Nunito-ExtraBold.ttf", "./lgl/Nunito-ExtraBold/");
convert("./fonts/Nunito/Nunito-ExtraBoldItalic.ttf", "./lgl/Nunito-ExtraBoldItalic/");
convert("./fonts/Nunito/Nunito-ExtraLight.ttf", "./lgl/Nunito-ExtraLight/");
convert("./fonts/Nunito/Nunito-ExtraLightItalic.ttf", "./lgl/Nunito-ExtraLightItalic/");
convert("./fonts/Nunito/Nunito-Italic.ttf", "./lgl/Nunito-Italic/");
convert("./fonts/Nunito/Nunito-Light.ttf", "./lgl/Nunito-Light/");
convert("./fonts/Nunito/Nunito-LightItalic.ttf", "./lgl/Nunito-LightItalic/");
convert("./fonts/Nunito/Nunito-Regular.ttf", "./lgl/Nunito-Regular/");
convert("./fonts/Nunito/Nunito-SemiBold.ttf", "./lgl/Nunito-SemiBold/");8
我在代码中转换了开源的思源字体和微软雅黑字体。经验证，转换后的字体均可用。请放心尝试。
BTW：Mapbox GL JS的字体halo效果不错，有图有真相：
以上my_test.js 必须放置于 /root/mapbox_tools/node-fontnik0目录下
运行
node my_test.js
