https://github.com/hlorenzi/font-js

🔠 Visually inspect .otf/.ttf/.otc/.ttc glyphs online, and extract glyph images and metadata through the command line! -- https://hlorenzi.github.io/font-js/
https://github.com/hlorenzi/font-js

command-line command-line-tool commandline file file-format font font-collection font-face glyph glyphs inspect inspector opentype otc otf truetype ttc ttf web webapp

Last synced: 25 days ago
JSON representation

🔠 Visually inspect .otf/.ttf/.otc/.ttc glyphs online, and extract glyph images and metadata through the command line! -- https://hlorenzi.github.io/font-js/

• Host: GitHub
• URL: https://github.com/hlorenzi/font-js
• Owner: hlorenzi
• Created: 2018-10-22T12:57:37.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-04-03T19:20:31.000Z (over 3 years ago)
• Last Synced: 2024-09-06T23:34:07.095Z (2 months ago)
• Topics: command-line, command-line-tool, commandline, file, file-format, font, font-collection, font-face, glyph, glyphs, inspect, inspector, opentype, otc, otf, truetype, ttc, ttf, web, webapp
• Language: JavaScript
• Homepage:
• Size: 49.8 KB
• Stars: 21
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# font

[📱 Try a glyph viewer right now in your browser!](https://hlorenzi.github.io/font-js)

Utilities and a CLI for extracting glyphs and metadata from font files.

Currently allows loading TrueType or OpenType fonts or font collections,

and extracting metadata and glyph geometry.  

The command-line interface allows for extracting black-and-white,

grayscale, and signed distance field PNG renderings, and JSON metadata.

Run the command-line interface without arguments to check all the

available options.

Run via npx: `npx @hlorenzi/font`

Install with: `npm install @hlorenzi/font`

## Command-line Examples

```shell

# Extracts all glyphs from "arial.ttf" into PNG and JSON files.

npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]"

# Set glyph range.

npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]" --glyphs="u+30..u+39"

# Set output mode.

npx @hlorenzi/font arial.ttf -o "output/unicode_[unicode]" --img-mode="png-sdf"

```

## Package Example

```js

import { FontCollection, GlyphRenderer } from "@hlorenzi/font"

import fs from "fs"

// Load font file.

const fontBuffer = fs.readFileSync("arial.ttf")

// Load font collection and get first font.

const fontCollection = FontCollection.fromBytes(fontBuffer)

const font = fontCollection.fonts[0]

// Find glyph for Unicode character "a" and get its geometry,

// simplifying each bézier curve into 100 line segments.

const glyphIndex = font.getGlyphIndexForUnicode("a".charCodeAt(0))

const glyphGeometry = font.getGlyphGeometry(glyphIndex, 100)

// Render into a black-and-white buffer with scale factor 1 EM = 30 pixels,

// then crop empty borders and print to the console.

const glyphImage = GlyphRenderer.render(glyphGeometry, 30).cropped()

console.log(glyphImage.printToString())

```