Fonts: DEMOS #1216
Fonts: DEMOS #1216
Conversation
| // await Vex.Flow.setMusicFont('Bravura') | ||
| // await Vex.Flow.setMusicFont('Gonville') | ||
| // await Vex.Flow.setMusicFont('Petaluma') | ||
| await Vex.Flow.setMusicFont(fontName); |
There was a problem hiding this comment.
For vexflow-core.js, Flow.setMusicFont(fontName) is async. So you'll have to use await to make sure the font is loaded before proceeding to render the score.
| <html> | ||
| <body> | ||
| <div id="output"></div> | ||
| <script src="../../build/vexflow-core-with-bravura.js"></script> |
There was a problem hiding this comment.
These are new! Simon of OSMD requested support for smaller builds without undesired fonts.
vexflow-core.js bundles zero fonts. Load fonts at runtime by calling Flow.setMusicFont(...fontNames).
vexflow-core-with-bravura.js bundles only the Bravura font by default. Other fonts can be dynamically loaded with a call to Flow.setMusicFont(...fontNames).
| @@ -0,0 +1,46 @@ | |||
| // node fonts.js > output.html | |||
| // | |||
| // This demo shows how to use node-canvas to load a font (woff / otf). | |||
There was a problem hiding this comment.
When run on the command line via node, the ChordSymbol test cases fall back to Times and Arial, because the web fonts are not available. This demo shows how we can register custom fonts like Roboto Slab and PetalumaScript so that they will appear in node-canvas.
|
@0xfe IMO this is ready to merge. |
| <script type="module"> | ||
| console.log('VexFlow BUILD ' + Vex.Flow.BUILD); | ||
|
|
||
| //////////////////////////////////////////////////////////////////////// |
There was a problem hiding this comment.
Not a huge fan of this big comment line :-)
There was a problem hiding this comment.
Sounds good. Will remove. Sometimes I put in these "horizontal separators" to help guide the code reader between large code blocks, but here I have extra braces { } anyways, so they're probably not needed.
This PR contributes examples in the
vexflow/demos/fontsfolder. It is part of the Font PR that has been extracted for easier code review & merging.Since these files are independent from the core code, this PR is safe to merge. However, the demos won't actually work until the Font related improvements are merged (in the next couple of PRs).