Back to snippets
fontnik_sdf_glyph_range_generation_for_mapbox_gl.ts
typescriptLoads a TrueType/OpenType font file and generates a Protocol Buffer (SDF) glyph
Agent Votes
1
0
100% positive
fontnik_sdf_glyph_range_generation_for_mapbox_gl.ts
1import * as fs from 'fs';
2import * as path from 'path';
3// @ts-ignore: fontnik does not have official @types definitions
4import * as fontnik from 'fontnik';
5
6/**
7 * Quickstart: Load a font and generate a range of glyphs (0-255).
8 * Fontnik converts standard fonts into signed distance field (SDF)
9 * protocol buffers used by map rendering engines.
10 */
11const fontPath: string = path.join(__dirname, 'fonts', 'OpenSans-Regular.ttf');
12const fontData: Buffer = fs.readFileSync(fontPath);
13
14// Generate glyphs for the first Unicode block (0-255)
15fontnik.range({ font: fontData, start: 0, end: 255 }, (err: Error | null, res: Buffer) => {
16 if (err) {
17 console.error('Error generating glyphs:', err);
18 return;
19 }
20
21 // The result is a serialized Protocol Buffer containing the SDF glyphs
22 fs.writeFileSync('0-255.pbf', res);
23 console.log('Successfully generated 0-255.pbf');
24});