Mapbox GL JS學習筆記六：Mapbox樣式字體本地化方法

05-09

緊接上文，依然是看官方的例子：

{ "version": 8, "name": "Mapbox Streets", "sprite": "mapbox://sprites/mapbox/streets-v8", "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", "sources": {...}, "layers": [...]}

上篇文章我們說了 sprite 本地話，這一篇文章說一下如何使用 glyphs （字體）本地化。我們使用的工具是開源的命令行工具：genfontgl。

字體

設置方式
生成工具

Github地址：

https://github.com/sabas/genfontgl https://github.com/mapbox/node-fontnik

簡單介紹

genfontgl是一個簡單命令行工具，它可以將TTF文件生成Map box GL可以使用的字體文件，它的後台使用的fontnik這個node.js庫。

使用命令：

genfontgl [OpenSans-Regular.ttf] [output_path] > OpenSans-Regular.ttf 字體文件 > output_path 輸出文件存放路徑

原文介紹：

A simple command line tool to generate fonts for Mapbox GL via fontnik without gzipping the result.Usage: genfontgl OpenSans-Regular.ttf [output location]

node-fontnik是渲染字體庫成為Mapbox的node.js庫，原文介紹如下：

A library that delivers a range of glyphs rendered as SDFs (signed distance fields) in a protocol buffer. We use these encoded glyphs as the basic blocks of font rendering in Mapbox GL. SDF encoding is superior to traditional fonts for our usecase terms of scaling, rotation, and quickly deriving halos - WebGL doesnt have built-in font rendering, so the decision is between vectorization, which tends to be slow, and SDF generation.The approach this library takes is to parse and rasterize the font with Freetype (hence the C++ requirement), and then generate a distance field from that rasterized image.

安裝方式
安裝fontnik

node install -g fontnik

安裝genfontgl

node install -g genfontgl

如果目前直接運行測試例子那麼會報錯說是找不到「./lib/fontnik.node」這個庫，查看genfontgl安裝目錄中的/usr/local/lib/node_modules/genfontgl/node_modules/fontnik/lib/可以看到是沒有fontnik.node這個庫，為什麼會這樣猜測原因是由於genfontgl在安裝時候沒有配置好fontnik這個庫，所以需要將fontnik.node這個庫拷貝到這個目錄下。

拷貝fontnik.node到genfontgl文件夾

cp /usr/local/lib/node_modules/fontnik/lib/binding/fontnik.node /usr/local/lib/node_modules/genfontgl/node_modules/fontnik/lib/

運行測試例子

genfontgl OpenSans-Regular.ttf [output location]

輸出本地測試結果：

批量化操作python腳本

#!/user/bin/env python# -*- coding:utf-8 -*-"""通過使用 genfontgl 命令行工具將ttf字體文件轉換為Mapbox使用的pbf文件格式"""import osdef walkDirFile(srcPath, condition=".ttf"): if not os.path.exists(srcPath): print (u"找不到路徑: {0}".format(srcPath)) return None if os.path.isfile(srcPath): print (u"這是一個文件,不是路徑: {0}".format(srcPath)) return None if os.path.isdir(srcPath): fileList = [] for root, dirs, files in os.walk(srcPath): for name in files: filePath = os.path.join(root, name) fileName = os.path.basename(filePath) if condition: if condition == os.path.splitext(fileName)[1]: print (u"有限制條件,包含的文件: {0}".format(filePath)) fileList.append(filePath) else: print (u"無限制條件,包含文件: {0}".format(filePath)) fileList.append(os.path.join(root, name)) return fileList else: print (u"無法解析的路徑") return Nonedef convertTTF(srcPath, outputPath): if os.path.exists(outputPath): os.system("mkdir -p {0}".format(outputPath)) ttf_file_list = walkDirFile(srcPath) if not ttf_file_list: return for ttf_file in ttf_file_list: cmd_str = "genfontgl {src} {dest}".format( src=ttf_file, dest=outputPath ) os.system(cmd_str)if __name__ == "__main__": srcPath = "/Users/lsw/Downloads/fonts-master" outputPath = "/Users/lsw/Downloads/fonts-master/fonts-output" convertTTF(srcPath=srcPath, outputPath=outputPath)