使用opentypejs只显示特定的字形

Question

我正在使用opentype.js从谷歌字体(Poppin(中提取字形。目前，它很好地显示了所有的字形。但我只想要字符和数字。例如"；A、 B、C和1,2,3等。有没有办法只显示字形表中的特定项目？

提前感谢

Answer 1

font.stringToGlyphs('ABC')或font.getPaths(chars, 0, 90, 100)将只返回选定的字形。

如果需要获取边带、unicode等字形属性，请使用例如font.stringToGlyphs()。
font.getPaths()将返回路径数据(命令(。

let preview = document.querySelector("#svgPreview"); 
let chars = "ABCD0123";
let output ='';
// opentype.js accepts woff, ttf and otf
let fontFile = "https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLGT9Z1xlEw.woff";
opentype.load(fontFile, function (err, font) {
if (!err) {
//get glyphs as object
let glyphs = font.stringToGlyphs(chars);
console.log(glyphs)

//get glyphs pathdata for previewing
let paths = font.getPaths(chars, 0, 90, 100);
paths.forEach(function(path, i){
output +=path.toSVG(2)
});
preview.innerHTML = output;
let vb = preview.getBBox();
preview.setAttribute('viewBox',[0, 0, (vb.width+vb.x), 120].join(' ') )
console.log(paths);

} else {
console.log("Font could not be loaded: " + err);
}
});

<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>
<style>
svg{
border: 1px solid #ccc;
height:10em;
}
</style>
<svg id="svgPreview" viewBox="0 0 1000 100">
</svg>