search

photopea / Typr.js

Typr.js - process fonts in Javascript
MIT License
914 stars 73 forks source link

Font Fallback Support #26

Closed doodlewind closed 5 years ago

doodlewind commented 5 years ago

Hi, I'm trying to use Typr for font rendering in canvas, it parses our customized TTF font really well, while there're still a problem for us:

Our tailored fonts only contains some common used Chinese letters, so once user typed a char not included, with DOM the browser will fallback to the OS default font, while we don't have direct access to it in our code. Wondering how to render such letters with "fallback" in this case?

photopea commented 5 years ago

Hi, so you want to draw text with letters from two fonts? You can get glyphs of the main font (Typr.U.stringToGlyphs), and if there is a glyph 0 (missing character), you can draw a corresponding glyph from another font at this place (you would have to make your customized version of Typr.U.glyphsToPath - but it would be like 7 lines of code).

Or you can split glyphs into intervals of one and another font, call Typr.U.glyphsToPath() for each interval of glyphs, and merge vector paths of each interval together.

doodlewind commented 5 years ago

Thanks, this is close to what I expected to handle this in the field of Typr.

If we always have a font for fallback, that'd be fine, while what if I only have one font? When drawing text with canvas API, the missing glyphs will be rendered with browser's default fonts, but I can't get these fonts when drawing with Typr. Do I need to mix the canvas text API together with Typr to draw the missing glyphs then? For CJK it requires about 10+MB for a relatively complete charset, this is too large for a web editor. So with a tailored CJK font, missing glyphs can happen quite often :(

photopea commented 5 years ago

Typr.js is a tool for getting vector shapes out of TTF/OTF file. Do you think we should include some default fonts inside the code of Typr.js?

doodlewind commented 5 years ago

Default fonts may not cover all glyphs and can be really large. Guess in Typr.U, we can extend the functionality for mixing canvas fillText and Typr's draw text API, but how to align the baseline between them can be another trouble :(