如何从字体导出完整字形为SVG？解决尾部截断问题

方法一：调整FontForge命令扩展导出边界 #

FontForge默认导出时会基于字体的字形边界计算SVG viewBox，若字形超出默认范围就会截断。无需修改字体，可通过手动扩展每个字形的bounding box来解决：

修改后的命令：

fontforge -lang=ff -c 'Open($1); SelectAll(); UnlinkReference(); foreach Char(g) { SetGlyphBoundingBox(-100, -100, 1100, 1100); }; Export("svg/%n-%e.svg");' font.ttf

• 参数说明：SetGlyphBoundingBox(xMin, yMin, xMax, yMax)，这里以默认em框1000为例，向上下左右各扩展了100单位。可根据实际截断程度调整数值，比如把-100改成-200，1100改成1200。
• 作用：遍历所有字形，强制设置更大的边界范围，确保导出的SVG能完整包含字形内容。

方法二：用Node.js的opentype.js工具导出 #

如果FontForge命令调整效果不佳，可使用Node.js的opentype.js库自定义导出逻辑，灵活控制边距：

1. 安装依赖

npm install opentype.js

2. 创建导出脚本export-svg.js

const opentype = require('opentype.js');
const fs = require('fs');
const path = require('path');

const fontPath = './font.ttf';
const outputDir = './svg';
const extraMargin = 100; // 自定义额外边距，单位基于字体em框

// 创建输出目录
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

opentype.load(fontPath, (err, font) => {
  if (err) {
    console.error('加载字体失败:', err);
    return;
  }

  font.glyphs.forEach(glyph => {
    if (glyph.name === '.notdef') return;

    // 获取字形路径
    const glyphPath = glyph.getPath(0, 0, font.unitsPerEm);
    const bbox = glyphPath.getBoundingBox();

    // 计算扩展后的viewBox
    const viewBox = [
      bbox.xMin - extraMargin,
      bbox.yMin - extraMargin,
      bbox.xMax - bbox.xMin + extraMargin * 2,
      bbox.yMax - bbox.yMin + extraMargin * 2
    ].join(' ');

    // 生成SVG内容
    const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="${viewBox}" xmlns="http://www.w3.org/2000/svg">
  ${glyphPath.toSVG()}
</svg>`;

    // 写入文件
    const unicodeStr = glyph.unicode ? glyph.unicode.toString(16) : 'none';
    const outputFile = path.join(outputDir, `${glyph.name}-${unicodeStr}.svg`);
    fs.writeFileSync(outputFile, svgContent);
  });

  console.log('SVG导出完成');
});

3. 运行脚本

node export-svg.js

• 优势：可精确控制额外边距大小，完全基于字形实际边界扩展，避免FontForge的默认边界限制问题。

内容的提问来源于stack exchange，提问作者Lance Pollard