在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