Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jaames/zfont
💬 Text plugin for Zdog - works with any .ttf font!
https://github.com/jaames/zfont
3d canvas font svg text truetype zdog
Last synced: 2 days ago
JSON representation
💬 Text plugin for Zdog - works with any .ttf font!
- Host: GitHub
- URL: https://github.com/jaames/zfont
- Owner: jaames
- License: mit
- Created: 2019-06-01T15:48:28.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T08:28:45.000Z (over 2 years ago)
- Last Synced: 2024-12-16T19:13:06.347Z (9 days ago)
- Topics: 3d, canvas, font, svg, text, truetype, zdog
- Language: JavaScript
- Homepage: https://jaames.github.io/zfont/
- Size: 2.47 MB
- Stars: 184
- Watchers: 6
- Forks: 10
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Zfont
A text plugin for the Zdog 3D engine! Renders TrueType fonts via Typr.js | jaames.github.io/zfont
Features | Caveats | Demo | Installation | Usage | API | Zdog.Font | Zdog.Text | Zdog.TextGroup | Todo | Building
## Features
* Built on top of [Typr.js](https://github.com/photopea/Typr.js), which supports a wide range of .ttf and .otf fonts with speed and grace
* Less than 14kB minified and gzipped
* No need to worry about waiting for fonts to load; text automatically pops into existence once the font is ready
* Includes support for multiline text
* Update font, text, color, alignment, etc at any time
* Bonus utilities for measuring text, waiting for font load & more!
## Caveats
* You have to provide a .ttf to use yourself; it isn't possible to use system fonts
* Character range is limited to whichever glyphs are supported by your chosen font, and font stacks/fallbacks aren't supported yet
## Demo
A live demo can be found [here](https://jaames.github.io/zfont/), there's also some more in-depth examples on [Codepen](https://codepen.io/collection/DPKGvY/)!
## Installation
### Install with NPM
```bash
$ npm install zfont --save
```
If you are using a module bundler like Webpack or Rollup, import Zfont into your project:
```javascript
// Using ES6 module syntax
import Zfont from 'zfont';
// Using CommonJS modules
const Zfont = require('zfont');
```
### Using the jsDelivr CDN
```html
```
When manually including the library like this, it will be globally available on `window.Zfont`
### Download and Host Yourself
**[Development version](https://raw.githubusercontent.com/jaames/zfont/master/dist/zfont.js)**
Uncompressed at around 75kB, with source comments included
**[Production version](https://raw.githubusercontent.com/jaames/zfont/master/dist/zfont.min.js)**
Minified to 45kB
Then add it to the `` of your page with a `` tag:
```html
<html>
<head>
<!-- ... -->
<script src="./path/to/zfont.min.js">