Closed rvilarl closed 2 years ago
We currently use opentype.js to extract the glyphs from the OTF files.
Looking forward, I think someday we could use the FontFace API. That would support use of the SMuFL OTF files directly, without needing opentype.js.
I wrote a basic glyph inspector using the FontFace API. You can see it after you run grunt
in your local copy of VexFlow. Open the tools/fonts/inspector/otf.html
file.
In the HTML source, look for
async function loadFontFiles() {
const bravuraOTF = '../@/bravura/Bravura_1.392.otf';
const bravura = new FontFace('Bravura', `url(${bravuraOTF}) format('opentype')`);
await bravura.load();
document.fonts.add(bravura);
...
So someday, it would be great to support loading these OTF files directly. VexFlow would be responsible for scaling and placing the glyphs in the correct locations on the score.
@ronyeh I am making the experiment with OpenType because it also provides the paths for SVG. The only thing that I am missing is rotation. Does FontFace provide SVG paths and rotation?
Hi folks -- I would prefer not to include OpenType in Vexflow. There's no real benefit, since we preprocess the font data anyway, and we have to customize the metrics (the font formats are not the hard part.) And I'd like to maintain the "no runtime dependency" requirement for Vexflow.
@0xfe Ok but there is a benefit: VexFlow size increases every time we include a new font and OTF is much more size efficient than the javascript representation.
I thought that this would be a good approach if we wanted to support Sebastian
, Finale
and Leipzig
font families
See https://www.smufl.org/fonts/ and address #1398 avoiding the further increase of the library.
We currently use opentype.js to extract the glyphs from the OTF files.
Looking forward, I think someday we could use the FontFace API. That would support use of the SMuFL OTF files directly, without needing opentype.js.
I wrote a basic glyph inspector using the FontFace API. You can see it after you run
grunt
in your local copy of VexFlow. Open thetools/fonts/inspector/otf.html
file.In the HTML source, look for
async function loadFontFiles() { const bravuraOTF = '../@/bravura/Bravura_1.392.otf'; const bravura = new FontFace('Bravura', `url(${bravuraOTF}) format('opentype')`); await bravura.load(); document.fonts.add(bravura); ...
So someday, it would be great to support loading these OTF files directly. VexFlow would be responsible for scaling and placing the glyphs in the correct locations on the score.
This is also an important imput to #1459 @ronyeh I agree that FontFace API is the way to go.
Can you get at the metrics with FontFace API? I don't think so. It is just a dynamic way of loading the fonts.
I have been experimenting with opentypjs and I have observed:
This approach would easily allow to include other fonts (it is enough to have the OTF file)
Thoughts?