将 Google 字体路径转换为 ​​SVG 路径

Posted

技术标签:

【中文标题】将 Google 字体路径转换为 ​​SVG 路径【英文标题】:Convert Google fonts path to SVG path 【发布时间】:2020-11-02 11:37:14 【问题描述】:

我正在尝试按照https://github.com/danmarshall/google-font-to-svg-path 的示例将 Google 字体创建为 svg。我的代码如下:

opentype.load('https://fonts.googleapis.com/css2?family=' + 'ABeeZee', (err, font) => 
  const textModel = new makerjs.models.Text(font, 'Test', 20, false, false, 1);
  const svg = makerjs.exporter.toSVG(textModel);
  console.log(svg);
);

我不断收到错误消息:ERROR TypeError: Cannot read property 'forEachGlyph' of null,我该如何解决?我的代码基于此处的示例:https://github.com/danmarshall/google-font-to-svg-path/blob/master/index.ts#L73-L97。

【问题讨论】:

【参考方案1】:

我是这样解决的:

const url = 'http://fonts.gstatic.com/s/quicksand/v21/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkKEo18G0wx40QDw.ttf';
const text = 'hello';
const size = 14;
const union = false;
const bezierAccuracy = 0;
let svg = null;
opentype.load(url, (err, font) => 
  const textModel = new makerjs.models.Text(font, text, size, union, false, bezierAccuracy);
  svg = makerjs.exporter.toSVG(textModel);
);
return svg;

【讨论】:

以上是关于将 Google 字体路径转换为 ​​SVG 路径的主要内容,如果未能解决你的问题,请参考以下文章

SVG 到字体 (IcoMoon) 创建多个路径

将轮廓路径转换为 ​​svg 路径

以编程方式将 SVG 形状转换为路径(lineto、moveto)

将具有混合(固定和百分比)值的 CSS 剪辑路径转换为 ​​SVG 剪辑路径

d3.js:将 SVG 地理路径转换为画布

opentype.js 和 maker.js 为文本呈现不正确的路径