purplebamboo / font-carrier

font-carrier是一个功能强大的字体操作库,使用它你可以随心所欲的操作字体。让你可以在svg的维度改造字体的展现形状。

Home Page:http://purplebamboo.github.io/font-carrier/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

根据说明操作字体生成,遇到一些问题。

cz848 opened this issue · comments

我照猫画虎写了个配置来生成字体,大致如下:

const fontCarrier = require('font-carrier');
const fs = require('fs');
const glob = require('glob');

// 创建空白字体对象
const font = fontCarrier.create();

font.set({
  id: 'icons',
  horizAdvX: 256,
  vertAdvY: 256,
});

font.setFontface({
  fontFamily: 'icons',
  unitsPerEm: '256',
  ascent: '224',
  descent: '32',
});

glob('src/icons/**/*.svg', (err, files) => {
  if (err) {
    console.error(err);
    return;
  }
  let code = 0xf100;
  files.forEach((file) => {
    console.log('读取文件:', file);

    let name = file.split('/');
    name = name[name.length - 1].split('.')[0];
    code += 1;
    // 也可以使用setGlyph可以设置更多信息
    font.setGlyph(`&#x${code.toString(16)};`, {
      glyphName: name,
      horizAdvX: 256, // 设置这个字形的画布大小
      vertAdvY: 256,
      svg: fs.readFileSync(file).toString(),
    });
  });

  // 默认会导出svg,ttf,eot,woff四种字体,
  // 可以不传path,这样会默认返回一个包含四个字体buffer的对象
  font.output({
    types: ['woff', 'svg', 'ttf'],
    path: 'src/fonts/icons',
  });
});

我看了生成出来的svg字体,问题如下:
1 font标签的id 和 horiz-adv-x 及vert-adv-y 并没有按照设定的有改变。
2 glyph和标签和 horiz-adv-x 及vert-adv-y 也没有变化。
两个问题导致生成的字体无法正常显示。

原来是我搞错位置了,参数应该写到create里面。